雨林: jquery sexy buttons

Simply-Buttons v2

by Kevin » November 11th, 2009 » 27 Comments

TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)

Background

I had some time a while back and read a few interesting articles on buttons:

These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better. After a little work I came up with the “Simply-Buttons Technique”.

Benefits

Buttons size to fit text.
There are 3 states: Inactive, Active, and Hover.
They look and behave the same way in every browser and operating system.
The do not need the javascript to work, they work with just the css
Way better looking buttons than what anyone else can do with XHTML/CSS, isn’t that reason enough?!

How it Works

The markup is pretty simple, as you can see below. The thing to notice here is that both the button and link tags each have a nested-nested span tag.

<button>
  <span><span>Button</span></span>
</button> 
 
<a class="button">
  <span><span>Button</span></span>
</a>

Now there are two parts involved here, the first thing to know here is that this method will work with just CSS. However it works a little better with some Javascript enhancements. Let’s take a look:

Generic (no javascript)

Now we see the buttons load nicely here, we are using the Sliding Doors Technique. The caveats are:

There are outlines on the buttons.
The text is selectable.
These buttons are not mobile friendly (the button tag).

The Solution

In comes the the Simply-Buttons Javascript component. The library solves the caveats above as you can see below:

YouTube Style (w/ javascript)

Below is the object you can configure to further customize the buttons to suite your design.

options : {
  hyperlinkClass : 'button' // 'a' tags with this class will be processed
  ,activeButtonClass : 'button_active' // Active class for active buttons
  ,states : { // The various states and css properties, define them as normal
    outer : {
      active : {
        backgroundPosition : 'bottom left'
      }
      ,inactive : {
        backgroundPosition : 'top left'
      }
    }
    ,inner : {
      active : {
        backgroundPosition : 'bottom right'
      }
      ,inactive : {
        backgroundPosition : 'top right'
      }
    }
  }
  ,iphone : {
    replaceButtons : true // if iPhone; replace buttons with inputs?
  }
}

Download the Code/Sample

Below you can download not only the core CSS and Javascript files but you also will get a few samples. I am not the greatest at tutorials so I will update this post as feedback comes in, however there are quite a few comments throughout the files. The important files are: stylesheets/buttons.css, javascripts/simply-buttons-v2.js.

Download Simply Buttons v2 (zip)

Installation

Simply include the stylesheet and javascript and make sure they can find your images. Then simple call the init function, either using the default options as below or configuring it as show above.

<link rel="stylesheet" type="text/css" href="stylesheets/SimplyButtons.css" media="screen" />
<script type="text/javascript" src="javascripts/SimplyButtons.js"></script>
<script type="text/javascript">
  window.onload = function()
  {
    SimplyButtons.init();
  };
</script>

Customize

As shown in the YouTube example, you can easily modify the buttons look and feel. You can do this by creating your own stylesheet and you can use the one supplied as an example, its filled with comments. There are also options that can be changed and configured on the javascript end as show above.

SUPPORT: Feedback and Donations help to support this Plugin and future development.

雨林

2009년 11월 14일 토요일

jquery sexy buttons