CSS button hovers without the lag

Both the hover (bottom) and normal (top) states of the button are in one image.

One of the best features of css is the ability to perform button hovers without java script. By button hovers I mean creating links that have different background images based on whether the mouse pointer is over the link or not. With CSS this is as simple as setting different background images for the a tag and the a:hover pseudo class:

a{
background-image:url("img/normal.png");
}
a:hover{
background-image:url("img/mouseover.png");
}

The image specified in the a:hover class will be displayed when the user moves the mouse pointer over an image. Once the user moves the mouse pointer away from the image it will revert to normal.png as specified in the a class.

This technique is an easy way to implement button hovers but it has one flaw. When the user moves the mouse over the link for the first time there is a time lag during which the mouseover.png image is fetched by the browser. Therefore the user does not see this effect immediately.Whats the solution? Well I discovered it while going through the code of the free wordpress theme freshy.

The author of that theme Julien De Luca uses an interesting techinque. Both the normal state and the hover state of the button are placed in the same image. However the position of the background is changed depending on hover or not:

a {
background-image:url("normal.png");
background-position:top left;
 
}
 
a:hover{
background-position:bottom left;
}

Using this technique you can remove the time lag because the browser has to fetch only one image that contains both normal and hover states.