• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

CSS Mastery Page 44 of this book covers "Background image basics".

CSS Rollover Buttons

Last time we created rollover buttons using Javascript, this time we create the same using CSS techniques. You should get something like this when done...

1. First save these two images to a folder on your local disk by right-clicking on them:

The first image represents the default state of the button. And the second image represents the hover state.

2. Then create a new HTML file in the same folder as the images.

3. Write the code for a simple link with a single   (non-breaking space) as the link text. We don't need text for the link since the "Click Me" text is already in the graphics of the button.

4. Now we give this link a class called btnContinue ...

5. And we define this new CSS class btnContinue in the head style section.

We had set the height and width properties to be 89px and 27px since that is the size of the button. In order for the link to be clickable in the entire 89 pixel by 27 pixel area of this button to be clickable, we set display: block.

4. Add the rest of the properties for the btnContinue class as shown ...

We set font-size to 10px to ensure that our   does not become larger than the 89px by 27px area of the button. We set text-decoration:none so that there would not be an underline under the  . Finally, we set the background image to be the blue default-state image button.gif. We also specify background-repeat:no-repeat as we did not intend for the button image to repeat.

5. Now if you have your browser render the HTML code so far, you should get...

As you hover over the button, you get the hand icon of your browser.

6. Time to build in the hover effect so that the orange background image appears as well as you hover over the link. We will use the hover pseudo-class. To do that we create another CSS rule using the same class name btnContinue but with :hover after it as shown...

This rule is selected (or applies) when the user hovers over the element of the specified class. So when the user hover over our link with the class btnContinue, the properties in the rule .btnContinue:hover will apply as well as the properties in the .btnContinue rule.

The only property that we need to change upon hover is the background image. And so we just have that property ...

background-image:url(button_hover.gif);

in this new rule.

7. When you run it, you see that the hover state appears as expected upon hover...

Here is the live code.

Next Lesson: