• Related Tutorials:
• Drawing Button
• Transparent GIF PNG
• Drawing Hover State
• Tutorial Index:
• Fireworks tutorials

Draw the Button Hover State using Fireworks

Given that we already have the draw the below button in the previous lesson.

We are now going to draw the hover state of this button. Take our existing button.png file and save it as button_hover.png. We will work on button_hover.png to create the hover state of our button.

There are several ways to alter the look of the button to make the hover state.

Flip the Gradient

One subtle change is to flip the gradient by moving the circle gradient handle from bottom of the button to the top. And then moving the square gradient handle to the bottom of the button.

And alter the color of the text...

Change the Hue

For a more drastic change, adjust the Hue...

I slide the Hue slider to the left...

But sometime it is not easy to achieve a nice color using the Hue setting.

So the best way is to hand pick a color by using the gradient editor as before.

Here are the two button states side-by-side.

Next Lesson: