Creating Glass Buttons in Fireworks CS3

This is a cool little button I created in Fireworks. It's basically a glass button with a 3D appearance. I thought it created a really nice effect so I thought I'd share it with you.

1. Draw out a square 58 X 58 and change the corner radius (Rectangle Roundness) in the Properties Inspector to 28.

2. I think for all my other glass buttons, I used a linear gradient but for this one I chose Starburst. I think it makes the button more visually interesting.

Left Color: #752B8A
Right Color: #E3D7E5

Starburst Gradient Fill

Click on the button and change the fill direction to something similar as the image below:

Stroke Settings

Now add a 1-Pixel Soft While Stroke to the button. Make sure it is set to Centered on Path.

3. Now add the following Filters. Make sure the button is selected and In the Properties Inspector, click on Filters.

Inner Glow

Filters > Shadow and Glow > Inner Glow

Drop Shadow

Filters > Shadow and Glow > Drop Shadow

Creating the Highlight

The highlight helps create the 3D look of the button and makes it look more like glass.

4. Select the Ellipse Tool and draw out an oval over the top left corner of the button and position in similar to what is shown below:

Don't worry about the Fill color at this point, we'll be doing that soon!

Intersecting Paths to Trim the Highlight

5. It would probably be a good idea to trim off the part over the highlight that we don't need. To do this, click on the button (not the highlight) and duplicate it (CTRL+C - CTRL+V). You'll soon realize why this is necessary. Select the oval and the copied button and go to Modify > Combine Paths > Intersect. If you look in the Layers Panel you'll notice that the duplicate button is gone! That's why we had to make a copy of the original because if we intersected the original shape, we would have a button with a bite taken out of it!

6. The fill color for the highlight needs to be a Black/White Linear Gradient. See the image below.

Now change the Blend Mode in the layers panel for the highlight to Screen and the opacity to 61%. Don't choose anything other than 61% because you'll blow up the universe. Just kidding! Choose whatever suits you!

You should now have something like this:

And that's it!

If you would like to download this file to open in Fireworks Right-Click on the button below and save it to your computer: