AOWS

Just another adrian’s weblog

Efecto botón en un enlace con a:active

leave a comment »

Las pseudo-clases se aplican a ciertos selectores CSS para añadirles algunos efectos. Un buen ejemplo lo tenemos en los enlaces, a los que le podemos aplicar reglas según el estado en el que se encuentren:

  • a:link un enlace no visitado
  • a:visited un enlace ya visitado
  • a:hover el ratón está sobre el enlace
  • a:active el usuario hace click sobre el enlace

En este ejemplo vamos a usar a:active para darle un efecto botón a un enlace. Para ello tendremos que añadir las siguientes reglas a nuestro CSS, así cuando un usuario haga click en el enlace éste se desplazará ligeramente hacia abajo dando la impresión de que se ha presionado un botón (lo cual puede ser una interesante ayuda visual).

a:active {
  position: relative;
  top: 2px;
}

Como wordpress.com no deja insertar estilos propios en los posts, no me queda más remedio que dejar el ejemplo en mi dominio: ejemplo de efecto botón con a:active.

Visto en “The definitive guide to styling web links“.

Written by adrian

14 febrero, 2010 a 02:24

Publicado en Uncategorized

Tagged with

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: