HTML
<a class="button" href="#">Button<span></span></a>
<a class="button button2" href="#">Button 2<span></span></a>
<a class="button button3 current" href="#">Button 3<span></span></a>
CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
float: left;
width: 200px; height: 50px;
cursor: hand; /*nastaveni rucicky pro IE 5.x*/
overflow: hidden;
background: url('button.gif') left top no-repeat;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button2, a.button2 span {
background: url('button2.gif') left top no-repeat;
}
a.button3, a.button3 span {
background: url('button3.gif') left top no-repeat;
}
a.button:hover, a.button span:hover, a.current, a.current span {
background-position: 0 -50px;
}
Tato stránka je součástí webu Typofilos.