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 ( <div class="nav"> ) next to the name of our button like so:

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

to

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

You should now have this: http://www.webdesigndev.com/tutorials/dwcssroleover

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

Bookmark with:

             

Add to Favorites	Google Bookmark
Delicious	Digg
reddit	Stumble Upon