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...
Last time we created CSS rollover buttons using two background images -- one background image fo the hover state and one background image for the default state. This time we will use the same rollover method but will be using only one background image instead. The advantage being that both the hover-state graphic and the default-state graphic are on the same image file and hence are loaded at the same time during page loads. This avoids any flicker-effect during hover-over cause by the extra loading of the hover-state graphics.
1. First we have to combine the graphic for the hover state and the graphic for the default state into one image. Here is the combined image which we will call buttonimages.gif ...
You can right-click and save this image to disk.
2. After you save this image to a folder, we will take the same HTML that we created last time and make modifications to it.
And that was all we did. View Live Code Here.
In the btnContinue class that is associated with the default state of the link button, you only see the blue button portion of the background buttonimages.gif. The reason that we do not see the orange part of the background image is because the anchor tag is only 89px by 27px. This is exactly big enough to see the blue button portion of the graphics.
In the btnContinue_hover class, the property...
background-position: bottom right;
is to position the background image so that the hover state portion (the orange part) of the image is visible. That property says that in the 89x27pixel window for the anchor tag, show the right side and the bottom portion of the background graphics.
Conclusion:
Of all the rollover techniques shown, we believe this method of using a single image CSS rollover is the best in most cases. It does not rely on Javascript, so it will work even if Javascript is turned off. And it does not have the flicker issue.
discuss this topic to forum
