Set of buttons

Buttons…

Large

Medium

Small

download files

Background…

In one of my last projects I´ve been playing around with sprites, SASS and ie7, to create an easy to use set of buttons with hover, pressed and disabled states.

Nowadays what rocks is doing everything in CSS3, but depending on the browsers you need to support, unfortunately you cannot afford that...

How it works…

Buttons created using 3 images (fixed left, repeated center and fixed right) in CSS2, at least they need 3 elements. In this case I´ve added a fourth one to be more flexible with disabled text.

This is my structure:

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

We could simplify this with a bit of jQuery:

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

And classes for hover and pressed states are added this way:

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

Comments…