Creating Rollover Effects with CSS Sprites

As I expressed in the section that you just read, the goal here is to create a new set of rollover buttons which don't show any noticeable delay when the corresponding background images are displayed.

While this sounds like something hard to do, the truth is that achieving a seamless rollover effect is a matter of creating only one image that contains all the states that correspond to a particular link. Of course, if this concept sounds rather confusing to you, please take a look at the following background image, which should dissipate any possible questions. Here it is:

As you can see, the above image is called a "CSS sprite." It has been created in such a way that it contains the four basic stages that corresponds to a regular link. Naturally, the most significant difference to note here is that in the previous example I used fourth different pictures, while in this case I utilized only one.

I'm using not only a single background image, which implies that it's downloaded by the browser once, but also the overall performance of the web document where the rollover will be included can be improved, since the client performs a single HTTP request to the server.

Now that you hopefully learned the logic behind creating a simple CSS sprite, allow me to show you the set of CSS styles that make the rollover work properly. They're as follows:

<style type="text/css">
  body{
     padding: 0;
     margin: 0;
     background: #fff;
  }

  h1{
     font: bold 24px Arial, Helvetica, sans-serif;
     color: #000;
  }

  ul{
     display: block;
     width: 150px;
     height: 25px;
     margin: 0;
     padding: 0;
     background: #fff url(buttons.gif) 0 0 no-repeat;
  }

  li{
     margin: 0;
     padding: 0;
     font: normal 12px Arial, Helvetica, sans-serif;
     color: #00f;
     overflow: hidden;
     list-style: none;
  }

  li a{
     display: block;
     width: 150px;
     height: 25px;
     margin: 0;
     padding: 0;
     background: #fff url(buttons.gif) 0 0 no-repeat;
     padding-left: 50px;
     text-decoration: none;
  }

  li a:link{
     color: #000;
     background-position: 0 0;
  }

  li a:visited{
     color: #00f;
     background-position: 0 -25px;
  }

  li a:hover{
     color: #c90;
     background-position: 0 -77px;
  }

  li a:active{
     color: #f00;
     background-position: 0 -51px;
  }
</style>

In this specific case, the rollover effect is achieved by changing the position of the previous background image (the CSS sprite), in accordance with the different stages that correspond to a particular link. This concept is reflected more accurately by the following CSS declarations:

li a:link{
    color: #000;
    background-position: 0 0;
}

li a:visited{
   color: #00f;
   background-position: 0 -25px;
}

li a:hover{
   color: #c90;
   background-position: 0 -77px;
}

li a:active{
   color: #f00;
   background-position: 0 -51px;
}

As you can see, the background image is moved from bottom to top, in consonance with the specific state of the link, which results in displaying a flawless rollover effect without noticeable delays between its different states. Now, do you realize the advantages of using CSS sprites in your web pages? I hope you do!

Okay, at this stage I demonstrated how to include a simple CSS sprite that is used for creating a rollover button. However, the previous example would be rather incomplete if I don't show you the complete source code that includes the corresponding CSS styles that were listed before, and the (X)HTML markup as well.

Therefore, to see how the complete example looks, click on the below link and read the final section of this tutorial.