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.