CSS Rollover Buttons

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

We want to create rollover buttons using CSS like the follow…

When you roll your mouse over the button, the button state changes.

1. First we put the images of the two button states into one single image file called button.gif…

The advantage of having both the hover-state graphic and the default-state graphic on the same image file is that they 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.

2. The left side of the image represents the default state of the button. And the right side of the image represents the hover state. The image is in GIF format with a transparent background.

3. Write the code for a simple link with a single 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.

CSS button code

CSS button code

4. We gave this link a class name of “btnContinue”.

5. We define this new CSS class “btnContinue” in the head style section as shown above.

We had set the height and width properties to be 89px and 27px since that is the size of one button in the image. 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.

We set font-size to 10px to ensure that our space in the link 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 space character of the link. Finally, we set the background image to be our graphical button.gif. We also specify background-repeat:no-repeat as we did not intend for the button image to repeat.

The graphical image with the two button is 178px wide. But we only see the blue graphic button in its default state since our link element is only 89px wide. By default, the background image will show the left and topmost portion of an image if it can not fit the whole image.

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

default button state

default button state

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

7. 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…

.btnContinue:hover {

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-position.  By setting the background-position to right, we see the right portion of the graphic file which shows the orange hover state of the button.

CSS button hover state

CSS button hover state