Micaela 19 de enero de 2009 a las 10.15
   Imprimir artículo
elWebmaster.com

Crear un bot贸n en estado “hover” s贸lo con CSS


Si bien no es muy utilizado, el estado CSS 鈥渁ctive鈥 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 鈥渁ctive鈥 puede resultar muy 煤til cuando posees botones de estilo personalizado.

Sencillamente mediante la utilizaci贸n del estado 鈥渁ctive鈥 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铆:

<a 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 鈥渁ctive鈥 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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Nuria dice:

    Muy interesante!

  2. jomer dice:

    Me muestra 2 botones, nota: lo uso dentro de un div

  3. jesus alexis arreola gutierrez dice:

    uff me ayudaste demaciado hermano Gracias!!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder