Fireworks Rollover Button Tutorial

Written by kenrick callwood Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Fireworks Rollover Button Tutorial
Buttons with rollover effects applied to them add to the user experience. (herz button 2 image by askaja from

Adobe Fireworks is a graphic design program that allows users to create and edit images and photos for a wide range of uses. The intuitive menus make it a great program for novice users who need access to a program that can handle most of the demands of simple graphic design projects, without the steep learning curve associated with many of the more professional software packages. Simple rollover buttons are easy to create.

Skill level:


  1. 1

    Open a new Fireworks document with the pixel dimensions 100 width by 50 height.

  2. 2

    Select the rectangle tool and create a background for the button, then select the text tool and type a label for the button.

  3. 3

    Press "SHIFT+F2" to open the Frames panel.

  4. 4

    Click the expand arrow in the upper right corner of the frames panel, and select "Duplicate Frame" from the drop-down menu.

  5. 5

    Select "After Current Frame" from the options in the next window and press "OK."

  6. 6

    Select frame 2 from the frames panel and change the colour of the text on the stage.

  7. 7

    Return to frame 1 and select the slice tool from the tool bar.

  8. 8

    Drag the slice tool over the rectangle and text on the stage with the left mouse button pressed to create a "hotspot" of the same dimensions as the rectangle.

  9. 9

    Click "File" and select the "Export Wizard" from the available options.

  10. 10

    Choose "JavaScript rollover" and click the "OK" button.

  11. 11

    Enter a name for the button and choose "Images Only" for the "Save as type," "Export Slices" from the "Slices" options, then check the "Selected Slices Only" check box. Click "OK" to export the finished button.

  12. 12

    Import the button file to an HTML editor to see the finished product.

Tips and warnings

  • The Adobe Dreamweaver HTML editor is designed to work seamlessly with Fireworks.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.