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.

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.

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

Step 7 – Right click anywhere on the 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. Click on Background and change the color of the background. I chose #009900 – green. Click OK once you have finished that.
(See Image 7)

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 8 for the final results)

And that is all you have to do to make a solid color rollover button in Dreamweaver using CSS. To make more buttons simply press enter type in text, highlight it, link it, and choose the rollover style for the text.