This is a 3-state css sprite built using the sliding doors technique while only using 1 image
*Make the image as long as your longest link title
The buttons
button code
<a href="#" class="button"><span>link text</span></a>
if you want to make IE happy, you need to add a blur to the button.
onclick="this.blur();"
The css
a.button {
background: url(button.gif) no-repeat bottom right;
display: block;
float: left;
height: 28px; /* button image height */
margin-right: 6px;
padding-right:10px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
}
a.button span {
background: url(button.gif) no-repeat bottom left;
display: block;
line-height: 28px; /* button image height */
padding-left:10px;
}
a.button:link span,
a.button:visited span {
color:#ffffff;
}
a.button:hover {
background-position: center right;
}
a.button:hover span {
text-decoration: none;
color: #ffffff;
background-position: center left;
}
a.button:active {
background-position: top right;
}
a.button:active span {
background-position: top left;
color:#fadca1;
}