No recuerdo si ya había hablado aquí en Eliseos sobre dos artículos que en su momento me llamaron poderosamente la atención, uno llamado How to make sexy buttons with CSS y Rediscovering the Button Element respectivamente. Donde nos enseñaban como personalizar y estilizar botones mediante CSS.

El día de hoy, desde p51labs nos llega una solución que toma varios preceptos de esos dos artículos y mejora un poco mas el concepto de personalizar botones.

La idea es muy simple mediante un markup muy simple y un poco de CSS (javascript, aquí es opcional) se puede lograr un botón muy Sexy!

<button>
  <span><span>Mi titulo</span></span>
</button> 
 
<a class="button">
  <span><span>Mi titulo</span></span>
</a>

Algunos beneficios de esta técnica es que el texto se “auto ajusta” a nuestro botón, lucen prácticamente igual en todos los navegadores (en IE 6 también!) y devuelven un código valido.

Y por ultimo, pero no menos importante cada botón cuenta con sus respectivos estados: Inactive, Active, y Hover