Crear un botón en estado “hover” sólo con CSS
Sencillamente mediante la utilización del estado “active” podremos darle a nuestros botones la apariencia de que están siendo presionados, o cualquier otro estilo que deseemos que tengan, para hacer que nuestro sitio se destaque.
Si poseemos un botón que utiliza una imagen su marcador sería algo así:
< id=" button">< / a>
Es sencillamente un link vacío con un id, al que podremos utilizar para darle estilo al link. Nuestro CSS entonces luciría así:
#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}
Estamos convirtiendo la línea del link en un bloque, dándole ancho y peso, y programando una imagen de fondo.
Para añadir el estado activo simplemente hay que poner “active” después del selector del link:
#button:active {
background: url(button.png) no-repeat bottom;
}
Esta es una buena forma de hacer que nuestro siti web tenga un aspecto más similar al del escritorio de nuestra PC y resulte más familiar para los usuarios.
Fuente: Usability Post
Deja una respuesta