Posted By

lister on 07/05/11

Tagged

Versions (?)

Last Edited at 07/05/11 07:10am

Statistics

Viewed 652 times

Favorited by 0 user(s)

Related snippets

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

a {
   display: block;
   background: url(sprite.png) no-repeat;
   height: 64px;
   width: 240px;
}
 
a:hover {
   background-position: 0 -64px;
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.