Creating Image Rollover Buttons in Dreamweaver Using CSS

In my last guide I showed you how to make Solid Rollover Buttons in Dreamweaver Using CSS. In this guide I will show you how to make rollover buttons using images with CSS. Before we begin, you need to find a button that you want to use. You can find free buttons or you can use Fireworks and create your own buttons. If you choose to get free buttons off the internet, make sure you get two buttons. One for your main button and one for your rollover button. Well the same goes for Fireworks, you need to make two buttons. Go ahead and get your buttons and save them on your hard drive before you begin.

Image Rollover Buttons

Step 1 – Open your Dreamweaver program, create a new file, and save it. (Save it as newrollover.html)

Step 2 – Type some text on the document. In my example I typed Rollover Button.

Step 3 – Right Click on the document and click CSS Styles > New. In the dialog box do the following:
Selector Type – Class
Name – .rolloverbutton (don’t forget the period in front of the “r”)
Define in – This Document Only
(See Image 1)

Then click OK

Step 4 – A new dialog box will appear. This is where you will make your buttons. I will list each category and what to put in each category. In parentheses I will put what I chose in my example.

Category – Type

Font – Choose the font for your button. (Verdana)
Size – Choose the size of your font. (14)
Weight – Choose if you want the font bold, normal, etc. (normal)
Style – Choose if you want the font italic, normal, etc. (normal)
Decoration – Choose if you want underline, overline, etc. (none)
Color – Choose the color of your font. (Black)
(See Image 2)

Category – Background

Background Image – Click Browse to locate the button on your hard drive that you want to use. This will be the button that is displayed on your page, not the rollover button.
Repeat – Choose No Repeat
(See Image 3)

Category – Block

Display – Select “Block”
(See Image 4)

Category – Box

Width – In the width field you need to type in how long your button is. (152)
Height – In the height field you need to type in how tall your button is. (27)
(See Image 5)

You don’t need to mess with any of the other categories. Once you are finished with the steps above, click OK.

Step 5 – Highlight over your text you typed on the document, type a link in the link field in your properties window.

Step 6 – With the text still highlighted, click the drop down box beside Styles in your properties window and choose Rollover Button. Now you should see your button.

Note: If your text is not in the middle of the button, you will need to play around with the padding in the CSS panel. In my example I used Padding Left – 12 pixels and Padding Top – 4 pixels to get my text in the middle of the button.

Now we need to do the rollover part of the button.

Step 7 – Right click anywhere on your dreamweaver document and click CSS Styles > New. In the dialog box do the following:
Selector Type – Advance
Selector – a.rolloverbutton:hover
Define in – This Document Only
(See Image 6)

Then Click OK.

Step 8 – A new dialog box will appear with all the categories in the left panel. Change your background image by clicking Browse. Locate the button on your hard drive that you want to use for your rollover. Click OK once you have finished that.

Step 9 – In the top of your Dreamweaver window Click File > Save. To save your document.

Step 10 – Now press F12 to preview your button in a browser.

(See Image 7 to see the final results)

You have just created an Image Rollover Button in Dreamweaver using CSS. You may need to make changes to the font color depending on the color of your button. That can be done by right clicking on the document and Clicking CSS > Edit and you can edit which one you need to.