Ir directamente al contenido de esta página

Dar un comportamiento natural a un botón

El diseño está en los detalles, pero no sólo en su vertiente gráfica, sino también en lo referente a la interacción de una interfaz. En esta entrada indicamos cómo lograr que un botón se comporte de una forma más nátural, empleando sólo CSS3.

Según Jakob Nielsen en Website Response Times, contamos con una décima de segundo para convencer a nuestros usuarios de que un elemento interactivo de una interfaz funciona correctamente y que le proporciona el control que su diseño sugiere. Pero no sólo eso, sino que la respuesta inmediata de la interfaz puede además evitar que el usuario realice acciones indeseadas, como reenviar un formulario si piensa que su primer clic no ha tenido efecto.

Técnicamente sólo necesitamos emplear la pseudoclase :active para modificar el aspecto de un vínculo o botón cuando nuestro usuario hace clic sobre el elemento en cuestión. Pero lo que queremos explicar aquí es cómo hacer que un botón se comporte de una forma más natural, y para ello hemos elegido un diseño que últimamente se ha puesto de moda:

El botón [Firefox 9]

La idea es que si se ha empleado un diseño que simula las tres dimensiones, lo coherente es que el botón, al activarlo, se comporte como lo haría un botón real, es decir, que se «hunda» al presionarlo, lo que significa que:

Primero lo primero. Para lograr el relieve hemos empleado sombras múltiples, tal y como se indica en la especificación de la propiedad box-shadow:


button{
  [...]
  -webkit-box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  -moz-box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  [...]
}

Y después hemos declarado el estado activo de esta manera:


button:active{
  position: relative;
  top: 3px;
  -webkit-box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
  -moz-box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
  box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
}

Como variamos la posición relativa del botón en 3 píxeles, modificamos los tamaños correspondientes de las sombras.

Así de sencillo.

Esta entrada se publicó el 21 de enero de 2012, se archivó en CSS, Diseño, y fue etiquetada como . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012