Pin Me

Creating Glass Buttons With Illustrator

written by: Amanda Presley•edited by: Michele McDonough•updated: 6/16/2010

I will show you how to quickly create round glass play and stop buttons using Adobe Illustrator CS3.

  • slide 1 of 1

    The Glassy Look

    Glass buttons seem to be hot on the web right now and for good reason. They look really cool. In this tutorial I will show you how to quickly create the glass buttons using Symbols in Adobe Illustrator CS3. These buttons have the play symbol and the stop symbol on them. These buttons are easy to create, so let’s get started.

    Opening the Symbol Box

    Adobe Illustrator CS3 Buttons- round glass play and stop buttons- web buttons and bars box Create a new document to work on. Go to the top of your Adobe Illustrator CS3 window and click Window > Symbol Libraries > Web Buttons and Bars. Your Web Buttons and Bars panel will open in a new box.

    Creating the Glass Buttons

    Creating the buttons is very simple. Scroll down to the bottom of the Web Buttons and Bars box. At the bottom of the box, you will see the different ball icons. Grab a ball with your mouse and drag it to your Adobe Illustrator CS3 Buttons- round glass play and stop buttons- glass ball document. There will be a blue box around the ball, you can drag the right corner of the box to resize it. Drag it inward to shrink it or drag it outward to make it larger. Drag as many balls as you want to onto your document.

    Adding the Play Symbol to the Glass Ball

    Adobe Illustrator CS3 Buttons- round glass play and stop buttons- polygon properties Now we will create the Play Symbol for the button. Select your polygon tool from the toolbar. The polygon tool is under the rectangle tool. After you have selected the polygon tool, click your mouse on the document. The properties box for the polygon will open. Change the sides to 3 and click OK. Grab the transform tool and rotate the triangle so that it looks like a play button. You can also size the triangle down.

    You can change the color of the triangle using the color boxes in the main toolbar. After you have customized your triangle like you want it, drag it to your button. There is your Round Glass Play Button created in Adobe Illustrator CS3.

    Adding the Stop Symbol to the Glass BallAdobe Illustrator CS3 Buttons- round glass play and stop buttons- finished 

    Now we are going to add the stop symbol to the glass ball. Drag you another ball to your document. Grab the rectangle tool from your tool bar and draw a square on your ball. Change the color and stroke color of the square to the desired color.

    That’s how you create the round glass play and stop buttons. They are very easy to create and can be used for many things. You could also do an equal button by using two narrow rectangles.