10

In the Button Editor, click the Over tab. Now click the Copy Up Graphic button. This will make a copy of the button as it is in the Up State. Make any alterations you want now to the Over State. This is the appearance of the button when the mouse cursor moves over the button.

Since there is a pretty heavy stroke I don't want to add a glow, although glows are pretty popular for over states. If you want to add a glow (be sure the button is selected), open the Effect panel (Window|Effect) click the down pointing arrow and choose Shadow and Glow|Glow. Set the size, color and opacity in the dialog box that comes up.

12

Click the Copy Over Graphic button and a copy with the light green will come on screen. Make any alterations you want. Often times the Down State (after a button has been clicked) is inset. To inset a button, select the button and open the Effect panel. Click the down pointing arrow and choose Bevel and Emboss|Inset Emboss.

How wide of an inset or the softness is going to depend on your button. I used a Width of 6 and a Softness of 6. Press Enter on the keyboard to accept the settings. If you ever want to edit the settings just double-click the effect name in the Effect panel and the dialog box will open.

13

Before you leave the Down tab, select the Show Down State Upon Load if you want the Down state to show on the page the link leads to.

If you want to go all the way and have a Over While Down State then click on the Over While Down tab.

14

Click the Copy Down Graphic button. Now add what you want to make the button the way it will appear when the cursor is passed over a down button.

Open the Fill panel and select a dark green color for this exercise.

15

Click the Active Area tab. The light green you see around the button encompasses all the states of the button. It is the slice area that is being defined by Fireworks. The Button Editor is the only place this slice can be altered. Since this slice is huge adjust it now.

To adjust the slice simply drag a corner point down, up and in. You can see the adjustments made below. Just be sure that if you have a glow or another effect on one of the other states that the slice is big enough to encompass it all.

16

Close the Button Editor, click the X in the corner. An Instance of the button has been added to your document. What that means is that a Symbol was automatically made and added to the Library panel. (Window|Library). This is where the original symbol stays. If you want to edit the states, color, fill or effects of the button just double-click the button name or the button and the button editor will open.

18

To add additional buttons to the page, just drag them from the Library onto the page.

Double-click the next button, when the dialog comes up and asks if you want to edit the Current instance of the button or All, select Current.

19

To change the text on other buttons, double-click the button you want to change. In the Button Editor select the text and double-click. When the Text dialog box comes up, change the text and click OK. A dialog box will come up and ask if you want to update the text for the other states, click Yes and close the Editor.

20

To preview your new buttons just click the Preview tab and run the cursor over the button. Click also to see the down state and run the cursor over it again to see the Over While Down State.

If you'd like to download the file, click HERE