Tlačítka bez preloadu — příklad 4

Button Button 2 Button 3

Zdrojový kód

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.