Hacer una imagen que cambie al poner el cursor encima con css ayuda

soy nuevo en el foro y para hacer esta pregunta abro un nuevo tema, tengo un formulario y quiero hacerme un boton con efecto over para que tenga estilo,el caso es que no se como se hace creo que es con una sola imagen pero cuales son las propiedades? gracias a todas amigs

por ejemplo supongamos que el boton tiene un height de 25px pues creas una imagen con height de 50px con los degradados y despues con css haces un que con el efecto hover la imagen cambie de posicion algo asi:

.boton{
	border: none;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	font-size: 12px;
	width: 106px;
	border-radius: 4px;
	height: 25px;
	background-image:url(../img/btn-enviar.png);
}
.boton:hover {
	cursor:pointer;
	background: url(../img/btn-enviar.png) 0 -25px;
}

cuando pongas el cursor encima te mostrara las otros 25px de la imagen