#Dev-co Snippets

ID: 9001 - Botón con efecto hover usando un A y que funciona en todos los navegadores
Posted by andphe on Thu Mar 25 22:04:11 UTC 2010. Language css

/*
*  Notas:
*
*  - Es mejor usar un texto para el enlace porque es mas semántico
*  - En el ejemplo la imagen tiene 48px de lado
*/

<a href="destinodelenlace.html" id="boton">Texto del enlace</a>

#boton{
  display: block;
  height: 48px;
  width:  48px;
  background-image: url('laimagendelboton.png');
  background-repeat: no-repeat;
  text-indent: -9999em;
  font-size: 0px;
  line-height: 0px;
}

#boton:hover {
  background-image: url('laimagenhoverdelboton.png');
}