Custom Web Design & Development

CSS Button Sprite

Description:

An image sprite is multiple images combined into one master image. For this CSS Button Sprite Demo, we have combined images for 3 rollover states (normal, hover, active) into a single image sprite. Using the CSS background properties, we mapped out which horizontal segments (top, center, bottom) to display where needed.

Live Demo

IMAGE SPRITE:

CSS Sprite Image

Advantages of CSS Sprites:

  • No complicated JavaScript.
  • Saves bandwidth (1 image is smaller than 3).
  • Reduces HTTP server requests.
  • Faster page load.

Supporting web browsers:

  • Internet Explorer
  • Firefox
  • Chrome
  • Opera
  • Safari
  • Android
 

CSS Code:

/**JOIN NOW BUTTON SPRITE**/
#join-now {
  text-align: center;
  margin:0;
  padding:0;
}

#join-now p {
/*move text link off screen*/
  text-indent: -9999em;
}

#join-now a {
/*Change anchor to block element */
  display: block; 
  width: 277px;
/*Specify width and height of image, Height value is each button state */
  height: 80px; 
  background: url(
button-sprite.png) no-repeat;
}

#join-now a:link {background-position: top;}

#join-now a:visited {background-position: top;}

#join-now a:hover {background-position: center;}

#join-now a:active,
#join-now a:focus {background-position: bottom; outline:none;}

HTML Code:

<div id="join-now"> 
<p><a href="some-link.html" title="JOIN NOW">Join Now</a></p> 
</div>

Live Demo

That's all there is to it. Hope you enjoyed this brief tutorial.