In this tutorial we will learn how to create a cool Css roleover effect for your buttons.

We are going to start by creating a table (Insert>Table) use these details:

Rows: 1
Columns: 1
Width: 100 pixels
No Border

Inside the table create your text for the button, highlight the text and center it and link it to a page in your website.

Now we are going to go to the bottom of dreamweaver to the Properties Panel and Style > Manage Styles...

Create a new style with these options, naming your tag nav.

Use these settings for type:

Use these settings for background, Now click OK.

You should now have this CSS code:

nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
color: #000000;
}

Create a new class, use these options and click OK.

For Type use a color of white for the text colour.

For background we are going to have a black colour for the roleover.

Now we are going to create the size of the roleover, click OK.

You should now have this CSS code:

hover {
color: #FFFFFF;
background-color: #000000;
height: 25px;
width: 100px;
}

Now show code and design views so you can do the small code editing to finish the effect.

We are not going to add this code (

If you would like more help with this tutorial please register and visit the forum.