Create a Button with Hover and Active States using CSS Sprites

THIS TECHNIQUE IS NOW OUTDATED! It’s better to create buttons with CSS

buttons

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

First, a look at the working button.

Button

This is the finished version of what will be built for this tutorial.

The Design

First thing we need to do is open up photoshop and create a design for the button. In this instance, we want to make it look very distinctive as a button:

button_static

Here it’s nice and big for the demo just to make things nice and clear but buttons shouldn’t need to big as big as this for the majority of uses.

Hover State Image

We need to have a slightly different style for when a user hovers over the button just to give them an indication that the button is interactive and therefore clickable, a standard web practice.

button_hover

The hover state is slightly darker than the normal static appearance but very noticeable difference when the user actually hovers over the element.

Click State Image

Now for the part that a lot of designers miss out on. We need a third state that changes when the user clicks on the button.

button_click

We’ve gone with the visual metaphor of an actual, physical button like ones you see on a mobile phone or mp3 player. The user then has an immediate recognition that a button performs a function when pressed.

A simple inner shadow, reversing the gradient and moving the text down one pixel achieves this effect nicely.

Sprite Image

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; }

Where Else Sprites Should be Used

If you’re navigation relies on images then all states can be combined into one big sprite image. Combining all buttons that appear one one page or a single section of your site into one image can be a great way to cut down on http requests. In fact I can show you the buttons I used on a recent project, all listed on a single page.

View the Buttons!

Just to show you what I mean about combining buttons onto a single sprite image take a look at this image. Buttons can be added to the end of the row without affecting any of the others.

by @tkenny

You should follow me on Twitter here

Subscribe to Inspect Element by email to get updates on new articles, tutorials and WordPress themes: