Si bien no es muy utilizado, el estado CSS “active” de un link es el estado en que se pone un link cuando haces clic en él. El momento en que haces clic en un link, este se vuelve activo. Es por eso que el estado “active” puede resultar muy útil cuando posees botones de estilo personalizado.

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

¿Te gusta este artículo? Compártelo con tus amigos!