Multi element button styles

I recently encountered an issue with the craziness that is IE6 and 7 not using the values of multiple buttons and instead submitting the inner HTML. IE6 goes one step further into the abyss of despair and sends every button’s inner HTML on the current page with a single click of one button. You can read more about this specific unfriendly IE issue with buttons on Drew McLellen’s blog.

To get around this all buttons were changed to a mixture of links and inputs. Thankfully I’d styled buttons and inputs of type submit to appear the same, but I hadn’t considered links being used as buttons in the project I was working on.┬áThis led me to work on a specific set of classes that could be applied to inputs, buttons and links. Creating a standard look and feel for them regardless of their type. This gives you the freedom to use whichever element you need and not worry about it looking out of place. You can even mix and match the elements and they will blend together like milk in coffee.

Take a look at the buttons via the demo – multi element button styles.

The styles currently work in the following awesome browsers:

  • Firefox
  • Chrome
  • Safari
  • Opera

And these not so awesome browsers:

  • IE6-7 (not perfect)
  • IE8-9

In terms of the markup all you need is a list, ordered or unordered, with a class of ‘btnList’.

<ul class="btnList"></pre>
</ul>

Then create as many list items as you need and fill them with either buttons, inputs or links as well as the class ‘btn’.

<ul class="btnList">
  <li><a href="#" class="btn">Link 1</a></li>
  <li><button class="btn">Button 1</button></li>
  <li><input type="button" value="Input 1" class="btn" /></li>
</ul>

Add the class ‘active’ to whichever element you want to be the default active element and then switch that around using your preferred method.

<ul class="btnList">
  <li><a href="#" class="btn active">Link 1</a></li>
  <li><button class="btn">Button 1</button></li>
  <li><input type="button" value="Input 1" class="btn" /></li>
</ul>

The demo page uses a little jQuery to illustrate the active class in action when you click through the elements.

$('.btnList .btn').click(function (e) {
$(this).closest('.btnList').find('.btn').removeClass('active');
$(this).addClass('active');
});

You can also add the ‘btn’ class to individual buttons, inputs and links to have the styles applied to those.

<button class="btn">Button 1</button>

If you’re interested, then you can grab the files for these buttons from GitHub – Multi element button styles.