cómo crear botones de formulario más atractivos

mayo 14th, 2009 front-end arctarus

La investigación en la atención, persuasión, elección, felicidad, aprendizaje, y otros temas similares nos demuestran que un diseño más atractivo es también más usable para la mayoría de la gente, por lo que decidimos que deberíamos mejorar el aspecto de nuestros formularios.

Uno de los elementos de formulario que nos ha dado algún quebradero de cabeza ha sido el botón de submit. Si queríamos mejorar su aspecto visual añadiéndole un toque más dospuntocerista necesitábamos hacer alguna artimaña, por lo que pensamos que la mejor solución era sustituir el elemento input type=”submit” por un button y ya que su función dentro del formulario va a ser enviar los datos qué mejor que el type=”submit”, la razón queda muy clara en la especificación del W3C sobre el elemento button.

“Los botones creados con el elemento BUTTON funcionan exactamente como los botones creados con el elemento INPUT, pero ofrecen la posibilidad de un renderizado mejorado.”

Para empezar hicimos una sustitución directa:

<button type="submit" id="submit" name="submit">enviar</button>

y luego nos pusimos a añadirle degradado y bordes redondeados, para lo cual usamos la clásica técnica de tener dos imágenes: una más grande (en nuestro caso de 300px de ancho) en el lado izquierdo, y otra mucho más pequeña en el lado derecho, añadiendo el siguiente html:

<button type="submit" id="submit" name="submit">
<span class="overmarked">
<span>enviar</span>
</span>
</button>

y css:

button span.overmarked {display:block; background:url(/imgs/bck_submit_left.png) top left no-repeat}
button span.overmarked span {display:block; padding:5px 14px 6px; color:#FFF; font-size:16px; font-weight:bold; background:url(/imgs/bck_submit_right.png) top right no-repeat}

La razón para incluir bajo el elemento button dos span en lugar de los clásicos div’s es que los elementos de línea no deben contener elementos de bloque en su interior.

El primer problema a resolver sería eliminar el borde y el fondo del button que queda alrededor de nuestro maravilloso botón y recuperar el cursor con forma de mano que caracteriza a los elementos clickables, para lo que añadimos la siguiente regla:

button {border:none; padding:0; background:transparent; cursor:pointer; width:auto; overflow:visible}

Las propiedades width y overflow se han añadido para eliminar los espacios extra que añade IE6 y IE7 a los buttons. Está todo muy bien explicado en Button Width in IE.

Y para finalizar pasamos a definir las reglas CSS para soportar cada uno de los estados que debe tener un botón: hover, active y disabled.

button:hover span.overmarked {background:url(/imgs/bck_submit_hover_left.png) top left no-repeat}
button:hover span.overmarked span {background:url(/imgs/bck_submit_hover_right.png) top right no-repeat}
button:active span.overmarked {background:url(/imgs/bck_submit_active_left.png) top left no-repeat}
button:active span.overmarked span {background:url(/imgs/bck_submit_active_right.png) top right no-repeat} 
button.disabled span.overmarked {background:url(/imgs/bck_submit_disabled_left.png) top left no-repeat}
button.disabled span.overmarked span {background:url(/imgs/bck_submit_disabled_right.png) top right no-repeat}

La clase disabled se añade con javascript en el momento de realizar el submit del formulario y nos sirve además para evitar que se envíe el formulario más de una vez por error.

Finalmente, y para redondear la jugada eliminamos el outline extra al recibir el foco del button que añaden los navegadores basados en gecko:

button::-moz-focus-inner {border: 0}

El resultado debe ser algo así lo que se puede ver en nuestro formulario de pedidos.

actualización 18/05/09
Después de leer Do not remove the outline from links and form controls hemos decidido retractarnos de la eliminación del outline de nuestro botón para así permitir la navegación de la página a través del teclado y la página no deje de ser accesible.

referencias

• In Defense of Eye Candy
• especificación del W3C sobre el elemento button
• Button Width in IE
• Do not remove the outline from links and form controls

Tags: button, css, eye candy, form, formulario, html

1 comentario

Comments RSS TrackBack Identifier URI

Deja un comentario