Alt-Web Design & Publishing
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 sprite. Then using the CSS background properties, we mapped out which horizontal segments to display where needed.

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 5.5, 6, 7, 8, 9, 10
  • Firefox 2+
  • Opera
  • Chrome
  • Safari

Method:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

/**JOIN NOW BUTTON SPRITE**/

#join-now {
text-align: center;
margin:0;
padding:0; }

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

#join-now a {
display: block; /* Change anchor to block element */
width: 277px;
height: 80px; /* Specify width and height of the image. Height is value of each button state */
background: url(../Images/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}

/**END JOIN-NOW STYLES**/


Lunarpages.com Web Hosting

HTML Code

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

</div>

    bookmarks