Sprite Image

Beautiful Button

The best practice is to combine all button states into one image and divide them out using CSS. This is because it:

• reduces http requests resulting in faster transfers
• prevents flickering effect caused by change of state by loading all states as one file

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;
}

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }