Custom Search

Glass button backgrounds

The glass effect of button domes is acheived by putting a set of layers with varying transparencies on top of each other. This tutorial will show you how to do it - but if you want to cut corners you can go to the copyright free area to find the graphic parts and then simply assemble your own buttons.

Open up a new Flash document.

Create a new Movie Clip symbol (Insert > New Symbol). Name it something relevant (button1) and click OK.
Select the Oval tool (the one that looks like a circle) and create a circle (hold down Shift) approximately 120 pixels wide. Make it with no edge - just a fill.

Select the filled area of the circle and bring up the Colour Mixer window. It is in the right hand panel - near the top.

On the Colour Mixer window click on the paint bucket to make sure the fill is selected. 

Now in the drop down menu (by default saying 'Solid') select 'Linear Fill'. Your circle will then have a gradient fill fading from black on the left to white on the right! It will automatically be filled with the default colours. You ned to select a colour for your button or use grey for plain glass. Then set your fill colour to a range of your desired hue. Change the fill range so that it starts with a dark shade of your colour and ends with a light shade.

Now select the "Fill Transform Tool" and click on your gradient filled shape.

Use the rotate fill handle to rotate the gradient fill until the dark shade is at the top and the light shade is at the bottom.

Select the first circle and copy it (Edit - Copy), create a new layer (Insert - Timeline - Layer) and "Paste it in Place" onto the new layer (Edit - Paset in Place).

Select the filled circle you have just made and open the Colour Mixer window again. This time select Radial Fill in the drop down box.
Set up the fill so that the outside of your circle is a dark shade of your colour with an Alpha value of 70%. Then set the inner colour's Alpha value to 0%.

This will create the shadow around the edge of your glass button.


Make another copy of the circle by selecting the second filled circle and copying it (Ctrl+C). Then create a new layer and "Paste it in Place" onto the new layer (Ctrl+Shift+V).


Select the "Fill Transform Tool" and move the fill vertically upwards so that it's centre touches the top of the circle.

Selecting this new fill, go to the Colour Mixer window and select radial fill from the drop down menu. Set up the fill so that it blends from white with 100% Alpha value in the centre to white at 0% Alpha at the edges.Use the Transform window to shrink the fill horizontally by about 6%. Now use the cursor keys to move the fill down a few pixels. This section then becomes layer 3

Add text as layer 4 and move that layer so it is below layer 3.

You then have your button graphic - you can resize it to a suitable size - make a brighter copy of it as a mouseover and have your own button - add a metal effect base and fixing ring - a sound when pressed and then you have a button....

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player