Mouseover buttons using CSS without reloading

Different states of a button such as the normal state and the mouseover state are often implemented with JavaScript: We have two images and depending on the state of the button, one of the images loaded, controlled by JavaScript.

By using this solution, there are three nasty things we have to consider: Loading the buttons takes a bit, it gives a small loading break, we are loading two images separately, which are a lot of unnecessary HTTP requests to the server and some users have disabled JavaScript and see nothing of our effort.

In this tutorial, I want to show you a trick, how we get the same result with a single image and only with the help of CSS without JavaScript, and therefore leave all the problems behind us.

The principle

The principle is demonstrated in this illustration:

Our Image:       Normal Button:       Mouseover:
 
-------                                 -------
--ABC--                                 --ABC--
-------                                 -------
-------          XX-------XX          XX-------XX
--DEF--          XX--ABC--XX          XX--DEF--XX
-------          XX-------XX          XX-------XX
                   -------
                   --DEF--
                   -------

On the left, we can see our image we want to use as background for our button. In the normal state, "ABC" can be seen, in the hover state "DEF" should stand on our button. In our image, we simply set both button states under each other on one image.

In the middle, we can finally see our normal button. The trick is, that the button is smaller than the image. So, only the upper side with the "ABC" is visible on our button. The rest is hidden. The edges of our buttons are marked with "XX".

In the MouseOver state, we move the image up, so that the other side of the image will be invisible. Between the edges marked with "XX", now the "DEF" can be seen clearly and the upper part of the image is hidden.

The CSS

If we translate these ideas into CSS, we get:

#button {
  background: url("pic.png") no-repeat 0px 0px;
  height: 25px;
  width: 100px;
  padding: 0;
  margin: 0;
}
 
#button:hover {
  background-position: 0px -25px;
}

First, we define our button, here we call it "button" with a size of 25 x 100 pixels. As a background image, we define "pic.png" and set the background-position to "0px 0px". That means, that as the background the upper area of "pic.png" is used, which can be seen at the top left from the coordinates 0/0. Everything else is cut off. And exactly in this corner, the image, we want to use as normal button state, should be placed.

Next, we define a CSS rule for the hover state, that is, when the mouse moves over the button. Here we appoint a different background-position namely "0px -25px". This indicates, when moving the mouse over the area of ??the picture, the frame of the image 25 pixels below the top will be shown. And that is where we should have placed the image for the hover state on our image.

Of course, these are only examples. The picture for the origin button can just as well be placed in a position of "127px 27px" and the button can also have a different size. It's just to make sure that the sizes and details have to fit together.

Other Considerations

This method is called the use of CSS sprites. Theoretically, we can now pack also other buttons or other single images of our website into only one large image and then only show excerpts and parts of it respectively display only the area of the image due to the properties in background-position, that we want to see at a certain element.

With this, the website is only downloading one image once, which is then saved in the browser cache, and can be repeatedly used. This is much more efficient than a query each time to download a variety of images with an equally large number of HTTP requests.

Of course, it is even more better for the performance to go completely without images and only design buttons with pure CSS. Therefore, this method should only be used if we really need an image. For color gradients or other designs that can also be realized easily with CSS, we should not use a picture.