p51 labs

Simply-Buttons Technique

by Kevin » December 6th, 2008 » 6 Comments

UPDATE! Version 2 is out, check it out ».

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

Background

So I have decided to share a button technique I have been using for awhile with the public. I had some time a while back and read a few interesting articles on buttons:

• How to make sexy buttons with CSS
• Rediscovering the Button Element

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”.

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 (…say that 3 times fast!).

<button type="button" value="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)

YouTube Style (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. It is currently written using the Prototype framework. I will be writing a version that is framework independent soon, but this works just as well. The library solves the caveats above as you can see below:

Generic (w/ javascript)

YouTube Style (w/ javascript)

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

this.options = Object.extend({
  hyperlinkSelector: 'a.button',
  activeButtonClass: 'button_active',
  states: {
    outer: {
      active: {
        backgroundPosition: 'bottom left'
      },
      inactive: {
        backgroundPosition: 'top left'
      }
    },
    inner: {
      active: {
        backgroundPosition: 'bottom right'
      },
      inactive: {
        backgroundPosition: 'top right'
      }
    }
  }
}, options || {});

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/buttons.js.

• Download Simply Buttons (zip)

Thoughts

I will be updating the Javascript in the weeks to come with a version that is not framework dependent. Other than that I would love to hear thoughts, suggestions, or even new takes on this technique. Let’s bring the button back!

NOTE To see this button style in action, check out the Contact Page.

• Simply-Buttons v2
• Upgraded Typography with sIFR3
• WP Additions – Pagination
• Holy Grail Layout
• Free YES Radio API