Creating Menu Buttons with CSS

Question

I am using HTML and CSS to create a webpage. I want to create buttons that are of a .gif file that I already have. I am using div to place items in the page itself. How do I use the image, and also use the rollover features so that the image changes to a different image I have that is a different color.

Thanks.

Answer 1

Make the button element a fixed size, and set the .gif file as the element background in CSS. Then you can use a :hover class on the element to change the image. Here I'm using an "A" tag so it works on IE6.

<a class="button"></a>

.button {
    display: block;
    background-image: url(default.gif);
    width: 100px;
    height: 20px;
}

.button:hover {
    background-image: url(hover.gif);
}

Answer 2

Changing the image url works, but can be a nuisance if the images are not preloaded or the user's cache is disabled.

Check out sprites FTW.

http://css-tricks.com/css-sprites/

A quick definition of a sprite is a large image, containing several smaller images. So a 10x20 image, with the normal state being the upper 10x10, and the hover state being the lower 10x10. The user only sees the upper 10x10 due to the CSS:

.button
{
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(to-image.gif);
    background-repeat: no-repeat;
    background-position: top left;
}

then on hover, it shifts to the bottom part of the image

.button:hover
{
    background-position: bottom left;
}