CSS rolečky jedním obrázkem

Takto vypadá použitý obrázek:

Takto vypadá rollover:

Zpomalená ukázka s využitím CSS 3 transitions:

<style>
.rollover a {
	display: block;
	height: 30px;
	width: 30px;
	background: red url(ano-ne.png);
}
.rollover a:hover, .rollover a:active, .rollover a:focus {
	background-position: bottom;
	background-color: green;
}
</style>
<div class="rollover">
<a href="#"></a>
</div>

Doporučuji k přečtení: Rychlé rollovery bez načítání