Sacando provecho a la pseudo-clase :active de CSS

¿Os habéis fijado en alguna ocasión que ciertos enlaces o botones se mueven cuando hacéis click y no soltáis? Es un comportamiento típico de los sistemas operativos que podemos llevar a cabo fácilmente en una página web.

Hoy vamos a ver como hacer que un botón creado por nosotros se mueva para abajo cuando obtiene el foco y se le hace click, dándole ese efecto que tan bien queda.

Os dejo tras el salto las sencillísimas instrucciones (luego vosotros lo podéis complicar como os de la gana).

Descargar | Ejemplo
El HTML:

Sencillito, ya que sólo necesitamos un botón…

<input type=”button” id=”botonCreativo” value=”Creativos Online” />

El CSS:

Aquí viene lo bueno. Para darle ese efecto a nuestro botón usaremos la pseudo-clase active.

#botonCreativo:active{position:relative;top:1px;}


Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

Categorías

CSS

Carlos Sánchez

Una de mis pasiones es el diseño, y de hecho trabajo como diseñador de interfaces para aplicaciones de iOS, además de hacer de vez en cuando... Ver perfil ›

Un comentario

  1.   Pedro dijo

    Lastima que aveces esto del active sea un bug en ie8 =(

Escribe un comentario