Set de botones

Los botones…

Grandes

Medianos

Pequeños

Origen…

Para uno de mis últimos proyectos he tenido que pelearme un poco con sprites, SASS e ie7 para poder crear un set de botones que fuera fácil de usar e incluyera estados de hover, pressed y disabled.

Hoy en día lo que mola es hacerlo todo con CSS3, pero si necesitas que se vea igual para todos los navegadares, hay que ir a lo tradicional...

Cómo funciona…

Los botones generados con 3 imágenes (izquierda fija, central repetida y derecha fija) hechas con CSS2 necesitan como mínimo 3 elementos. En este caso además añado un cuarto para mayor flexibilidad con el estado deshabilitado del texto.

Esta es mi estructura:

<div class="button large">
  <span>
    <button>
      <i>default</i>
    </button>
  </span>
</div>

Lo podemos simplificar añadiendo los elementos con jQuery:

<button class="button large">default</button>

&$.each($('.button'), function() {
  $(this).wrapInner('<i></i>').wrap('<div class="' + $(this).attr('class') + '"><span></span></div>');
});

Y las clases para los estados hover y pressed con:

$('.button').hover(function() {
  $(this).addClass('over');
}, function () {
  $(this).removeClass('over');
});

$('.button').mousedown(function() {
  $(this).addClass('pressed');
}).mouseleave(function(){
  $(this).removeClass('pressed');
});