How to create 3 states of a button with a single background image

In this tutorial, we will see how to use a single background image applied to a button to create its 3 states normal, hover and selected.

This method allows to have a single image loaded and available right from the start instead of having more images (one per state) loaded only once called and causing a blink during the changes.

The idea will be realized using the css property background, moving the background image with the value top, center and bottom.

To start, we will need to create the background image with the 3 different states aligned vertically.
In this example, the button is 25px high, so the background image will be 75px (3 states by 25px):

• at the top: the normal state of the button equal to the background-position:top;
• at the center: the hover state of the button equal to the background-position:center;
• at the bottom: the state selected (once clicked) equal to the background-position:bottom;

Here is the complete image once done used in this tutorial:

And the final example of 2 buttons with the first on the selected state:

The basic html structure consists of links (a element) inside a div container ‘menu’:

<div id="menu">
<a href="#nogo"></a>
<a href="#nogo"></a>
</div>

Next, we can add the css stile to create the above css horizontal menu.

First, the general css style to apply to each links:

#menu a{
width: 100px; /*the width of the button = the width of the background image */
height: 25px; /*the height of the button = the height of the background image/3 */
float: left; /*to position the elements horizontally*/
background:url(btn_bg.jpg) no-repeat top; /*to apply the background image positioned with is top part visible*/
margin-right: 2px; /*the right empty space in between the button*/
}

When we pass over the button with the mouse (hover state), the background is moved towards the top and positioned centrally using the css property background-position and the value center:

#menu a:hover{
background-position: center;
}

It is only missing to add the selected state to the button based on the actual page.
Only using the css, we can add a class name to the link to be selected.

Adding the class name to the html part:

<div id="menu">
<a href="#nogo" class="selected"></a>
<a href="#nogo"></a>
</div>

And adding the css style to that class where the background is moved once more towards the top and its inferior part being aligned with the bottom part of the button using the css property background-position with the value bottom:

#menu a.selected, #menu a.selected:hover{
background-position: bottom;
}

NB: the background position is also applied to the hover state of the selected link to avoid that the background moves to its original hover state if we pass over with the mouse.

Bookmark this css article

css background, css button, CSS Menu

2 comments

Stay updated with our RSS Feed