CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Os mostraremos como crear un botón rollover sin necesidad de usar Javascript, solo con CSS e imagen voluntaria.

Lo podemos hacer de varias maneras, aplicando la clase a un enlace, un div o un button:

Un enlace:

<a href="somelink" class="button"></a>

Un div:

<div onclick="some js function" class="button">< /div>

Un button:

<button type="submit" class="button"></button>

Ahora aplicaremos el código CSS, lo primero va a ser crear una imagen de 180 px de ancho por 60 de alto por ejemplo, así podremos aplicarle la propiedad background-position y convertirlo en un rollover que cambie la posición de la imagen del fondo al poner el cursor por encima de el (hover).

a.button {
  display: block;
  width: 180px;
  height: 60px;
  background-image: url(ruta de tu imagen);
  background-repeat: no-repeat;
  background-position: 0 0;
}

También podemos hacer más corta la propiedad CSS que se relaciona con el background sustituyendo por esto:

background: url(path to image) 0 0 no-repeat;

Aquí está la parte donde el botón se convierte en rollover, aplica este código CSS:

a.button:hover {
  background-position; 0 -60px;
}

Si nos damos cuenta, lo único que hemos hecho es cambiarle la posición de la imagen de fondo 60 píxeles más abajo, es decir, hemos desplazado la imagen de fondo para que se pueda ver la imagen del rollover.

Así ya tendremos nuestro botón rollover hecho totalmente en CSS creado y sin usar nada de Javascript.
Vía | Web Monkey