How to create a Web 2.0 Button in Adobe Fireworks
To start select the Rounded Rectangle tool and draw a rectangle approx 148px wide by 31px Tall.
Next Click on the fill color and select: Fill Options > Gradient.
Choose your colors and fading options and press return.
I like to use subtle variants in colors to give a natural look.
Now we are going to edit the rounded corners on the button.
To do this, from the top menu, select Window > Auto Shape Properties.
Select the button and add the parameters in the boxes that you wish to use.
I Used 14px for this particular one.
Now we are going to add a slight drop shadow to the button.
To do this select the button and in the properties inspector under filters hit the + button and select Shadow and Glow > Glow.
Set the parameters how you would like .
I used:
1
15%
Offset: 0
Next add your text and center in the button.
For the final step we are going to add the shine.
To do this draw a Rounded Rectangle similar to the first one we drew but around 70% of the size.
Use White for the color.
Go to the top menu and go to Commands > Creative > Auto Vector Mask.
Choose the fade to go from top to bottom, adjust to how you would like it to be, and press ok.
Adjust the opacity to that Rounded rectangle to about 84 and layer it over the original Button.
And there you have it, a nice looking Web 2.0 Button.
Click here to download the source file for this tutorial.