• Contents
  • Introduction
  • Downloads
  • Documentation

Custom Buttons

Introduction

Download

There are currently no directly downloadable artifacts for this project - instead, you can get the source code directly from the repository at the link below:

http://github.com/olle/custom_buttons

Documentation

This variant wil 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/

Demo

Below is an iframed example page with all the button styles that are part of the downloadable source code package.