Efeito css botão rolante

gistfile1.css

/**
 * Supondo que a imagem de fundo do botão tenha os 3 estados, cada um com 30px de altura e 150px de largura, 
 * totalizando uma imagem de 150x90px.
 */

/* Estado inicial */
div#meuBotao {
	width: 150px;
	height: 30px;
	cursor: pointer;
	background: url('meuBotao-bg.png') top center no-repeat;
	-webkit-transition: background 1s ease-in-out;
	   -moz-transition: background 1s ease-in-out;
	    -ms-transition: background 1s ease-in-out;
	     -o-transition: background 1s ease-in-out;
	        transition: background 1s ease-in-out;
}

/* Mouse sobre ou foco */
div#meuBotao:hover, div#meuBotao:focus {
	background-position: center -30px;
}

/* Clicado */
div#meuBotao:active {
	background-position: center -60px;
}