Custom buttons

These custom styled buttons are made as a fork from the great work of Derek DeVries and his, truly beautiful, custom styled cross browser buttons. In this version, all button elements will implicitly and easily be styled using CSS and a background PNG.

This variant will implicitly style any button element (with an inner sliding-doors span). This way there is no required button-class for styling and the HTML can stay thin and free from extra elements.

The buttons use a sprite-based background image for button graphics.

Some button skins, or extensions, breaks up into optional extra CSS and image files. These files are organized in the following way:

Three required files for default Custom Buttons (Implicit):

css/
   button.css
   ie-button.css
img/
   button.png

Theese three files will give the nice rounded look that Derek made. If you want to add styles or "skins" you need to add pairs of skin files. Don't forget to include the stylesheet on your HTML-page.

The skin files are named like this:

css/button-.css
img/button-.png

References

Below are som links to resourcs that describe more about styling button elements.

• http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://particletree.com/features/rediscovering-the-button-element/
• http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/