Posted By

lister on 07/05/11


Versions (?)

Basic css sprite button

 / Published in: CSS

Using a sprite is a good idea as it lowers the HTTP-Request. Here is a simple example on how to use this technique. Using a sprite, we can create the hover effect by changing the position of the background image down to a certain height to show the background to the button on hover. A simple yet effective technique. The drawback of using multiple sprites on an image is that you cannot repeat it.

  1. a {
  2. display: block;
  3. background: url(sprite.png) no-repeat;
  4. height: 64px;
  5. width: 240px;
  6. }
  8. a:hover {
  9. background-position: 0 -64px;
  10. }

Report this snippet  

You need to login to post a comment.