Fireworks Buttons: How to Create Burgundy Gradient Buttons with a Drop Shadow
Jasmine Starr
- Published Content: 1,238
- Total Views: 1,850,099
- Favorited By: 92 CPs
In this Macromedia Fireworks tutorial I will show you how to create the burgundy gradient buttons with a drop shadow in my image. Please see the image that I have provided to see the outc 
ome of this tutorial. These buttons really stand out. They look like they are bending. These gradient buttons are fairly easy to create. It just takes a little patience. We will make the first button and then we will duplicate the other buttons. Open your Fireworks program and let it load.
How to Create Burgundy Gradient Buttons with a Drop Shadow in Fireworks
Step 1 - Create a New Canvas
The first step is to create a new canvas to work on. Go to the top of your window and click File > New or press CTRL N on your keyboard. When the New Document window pops up enter 300 px by 300 px for your canvas size. Select the canvas color that you need and click OK.
Step 2 - Drawing the Button
The next step is to draw the button. Select the square tool from your toolbar. Then draw your button on the canvas. You can draw the button the size that you need it.
Step 3 - Applying the Gradient to the Button
Next, we will apply the gradient to the button. Click on the button to select it. Then click the Solid box in your Properties box. When the box drops down, click Gradient > Bars. Then click the Color box beside the gradient box to change the color. Click the arrow on the left and change the color to white. Click the arrow on the right and change the color to #333333. That will apply the gradient effect to the button.
Step 4 - Apply the Border
Next, we will apply the border to the button. Drop the border color box down and enter #363636 in the color box. Set the size to 1 and select 1-Pixel Soft for the stroke.
Step 5 - Apply the Drop Shadow
In your Properties window click Effects > Shadow and Glow > Drop Shadow. That will bring the Drop Shadow box up. Apply the following.
Distance - 6
Color - #B7B7B7
Opacity - 65%
Softness - 4
Angle - 315
Click off of the box to apply the drop shadow.
Step 6 - Creating the other Buttons
How to Create Burgundy Gradient Buttons with a Drop Shadow in Fireworks
Step 1 - Create a New Canvas
The first step is to create a new canvas to work on. Go to the top of your window and click File > New or press CTRL N on your keyboard. When the New Document window pops up enter 300 px by 300 px for your canvas size. Select the canvas color that you need and click OK.
Step 2 - Drawing the Button
The next step is to draw the button. Select the square tool from your toolbar. Then draw your button on the canvas. You can draw the button the size that you need it.
Step 3 - Applying the Gradient to the Button
Next, we will apply the gradient to the button. Click on the button to select it. Then click the Solid box in your Properties box. When the box drops down, click Gradient > Bars. Then click the Color box beside the gradient box to change the color. Click the arrow on the left and change the color to white. Click the arrow on the right and change the color to #333333. That will apply the gradient effect to the button.
Step 4 - Apply the Border
Next, we will apply the border to the button. Drop the border color box down and enter #363636 in the color box. Set the size to 1 and select 1-Pixel Soft for the stroke.
Step 5 - Apply the Drop Shadow
In your Properties window click Effects > Shadow and Glow > Drop Shadow. That will bring the Drop Shadow box up. Apply the following.
Distance - 6
Color - #B7B7B7
Opacity - 65%
Softness - 4
Angle - 315
Click off of the box to apply the drop shadow.
Step 6 - Creating the other Buttons
- These buttons really stand out.
- They look like they are bending.
- These gradient buttons are fairly easy to create.