Creating Solid Rollover Buttons in Dreamweaver Using CSS

Thanks to CSS you can now make rollover buttons in dreamweaver instead of inserting them one by one. It also keeps the size down on your page since you don't have all them images. So how do you use CSS for rollover buttons? Well let me show you. In this guide I will show you how to use solid colors for roll over buttons.

Solid Color Rollover Buttons In Dreamweaver

Step 1 - Open Dreamweaver, create you a new file, and save it. (Save it as rollover.html)

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

Step 3 - Right Click anywhere on the document and click CSS Styles > New. In the dialog box do the following:
Selector Type - Class
Name - .rolloverbutton
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 to give you an idea.

Category - Type

Font - Choose your font. (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. (#FFFFFF)
(See Image 2)

Category - Background

Background Color - Choose the color that you want your button to be. (#006699)
(See Image 3)

Category - Block

You don't need to do anything in the Block Category.

Category - Box

Width - Choose how wide you want your button to be. (100)
Height - Choose how tall you want your button to be.  (20)
(See Image 4)

Category - Border

Style - Choose the style of your border. (Solid)
Width - Choose how wide you want your border. (1 pixels)
Color - Choose the color of your border. (Black #000000)
(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.