Es bien fácil. la idea es tener en una misma imagen los dos estados del botón, o inclusive mas estados (click,over,out,active,etc...) lo importante es que debes saber exactamente la posición donde comienza un estado y otro para que luego mediante CSS puedas posicionarlo.

/*primero defines la imagen normal */
a.boton{
   background:transparent url(imagen-sprite.jpg) 0px 0px no-repeat;
}
/* cuando pongan el mouse sobre el link, cambias la posicion de la imagen */
a.boton:hover{
  background-position:0px 50px;
}

la propiedad "background-position" acepta dos parámetros, la posición X y la posición Y, para este ejemplo (background-position:0px 50px;) estamos posicionando la imagen en la coordenada 0,50 cuando esta over, y cuando esta normal le asignamos 0,0. este ejemplo es sprites verticales, para hacerlos horizontales pues sencillamente cambias el eje X en lugar del Y. Utilizando sprites podemos hacer efectos muy buenos utilizando javascript, podemos animar la trasnsición por ejemplo (pero ese es otro tema <!-- s8-) --><!-- s8-) --> ). saludos

uy pues si a practicar que quiero dominar el uso de sprites por que mejora el performance mucho verdad <!-- s:D --><!-- s:D --> gracias admin si tengo otra duda ya estare por aqui Saludos

mira en el siguiente links explican bien claro el uso de sprites [url]http://www.librosweb.es/css_avanzado/capitulo1/rollovers_y_sprites.html[/url]