Jprasads Info: CSS-Only Rollover Image Tutorial

Forget using tons of Javascript and other crazy ways to create a simple image rollover.
Here is a simple CSS technique using one single image to create a nice rollover effect.

1. Start out with your image.

button

The top 32 pixels of the image will be the base and the bottom 32 pixels will be the rollover.

2. Setup Your Hyperlink

Button

Seems pretty straight forward?

3. Setup Your CSS

.mybutton {
display:block;
height:32px;
width:120px;
background:url(button.gif) no-repeat;
text-decoration:none;
}
.mybutton:hover {
background-position: 0px -32px;
}
.mybutton span {
position:absolute;
left:-999em;
}

We first setup the anchor as a block element. Give it the width of the image and half of the image’s height. Then set the image as the anchor’s background.

Next, we set the hover. By setting the background position at 0px on the horizontal and -32px on the vertical, we are pulling the image up half way, which reveals the bottom part of the image. (Our desired effect.)

We are setting the span as absolute and positioning it -999em to the left off the screen. So when CSS is disabled by the browser, anything in the span will up. Be sure to put any information that is on your button in the span block. This is great for usability and screen reader software.

4. Enjoy!

Button

Tweak as necessary for your needs