Posted By

lister on 07/05/11



Viewed 424 times
Favorited by 0 user(s)

Basic css sprite button

/ Published in: CSS
Save to your folder(s)

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.

Copy this code and paste it in your HTML
  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


RSS Icon Subscribe to comments

You need to login to post a comment.