Revision: 48554
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at July 5, 2011 07:10 by lister
Initial Code
a {
display: block;
background: url(sprite.png) no-repeat;
height: 64px;
width: 240px;
}
a:hover {
background-position: 0 -64px;
}
Initial URL
Initial Description
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.
Initial Title
Basic css sprite button
Initial Tags
Initial Language
CSS