Simply-Buttons Technique : p51 Labs

Re-Rediscovering the Button Tag

Simply-Buttons Technique

by Kevin » December 6th, 2008 » 20 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:

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.

Be Sociable, Share!

Comments

20 Responses to “Simply-Buttons Technique”

Nice post! Thanks for including both javascript and CSS options!

Jake-DesignerFied on December 9th, 2008 at 7:53 pm

Not a problem, let me know if you have any questions about how to customize them to get your look and feel.

Kevin on December 9th, 2008 at 9:02 pm

What a nice way to kick-start a new blog. Great post! Short, practical and to the point

Morgan Roderick on December 10th, 2008 at 11:28 am

I am getting issues In IE. I pasted the css option steps as given.Still Buttons are not working.Can you help me?

Aliya on November 23rd, 2009 at 10:18 pm

Tnks for share ! and congratulations !

Daniel (From Argentina)

Daniel on February 3rd, 2010 at 4:31 am

Hi, I found this post while searching for help with JavaScript. I’ve recently switched browsers from Google Chrome to Mozilla Firefox 3.1. Just recently I seem to have a problem with loading JavaScript. Everytime I browse website that needs Javascript, my browser does not load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is very appreciated! Thanks

Nicki Dewick on March 4th, 2010 at 5:42 pm

:-. I am really thankful to this topic because it really gives great information **:

Corner Sofas %0B on January 28th, 2011 at 8:31 am

Hey, I don’t think saying this on your post Simply-Buttons Technique : p51 Labs would be the appropriate place but I could not find a contact page form within your somewhat messy theme (sorry). My visitors used to tell me the exact same thing so I swapped over to a different theme from http://tinyurl.com/themeforestz. I have only gotten compliments ever since. Cheers, Joselyn Trenbeath

Joselyn Trenbeath on June 2nd, 2011 at 3:36 pm

Excellent blog, Wanted to be able to comment will be able to not necessarily connect with the particular rss flow, you might want install the right wordpress tool for your to workthat.

Gisele Mcphetridge on August 3rd, 2011 at 11:14 pm

I came across your blogging site this afternoon and its a extremely good interesting read however the typeface is visually a bit off looking in ie.

Belia Kibby on August 11th, 2011 at 11:24 pm

My cousin recommended this blog and she was totally right keep up the fantastic work!

gry dla dziewczyn fryzjer on August 12th, 2011 at 5:20 am

This website is loaded with lots of extremely useful details on it! We appreciate you informing me. I must admit i was serious about the feel of your blog post however it is really quite appealing. Awesome job, continue the nice work

Wholesaler Galvanni on August 27th, 2011 at 10:39 pm

Tom und Jerry Spiele

Spiel Jetzt on September 5th, 2011 at 2:08 am

Even so good the results may look regarding losing weight, insufficient carbs could possibly be undesirable. Identical things applies when choosing Acai berries fat burning supplements.

cheap UGG Bailey on September 6th, 2011 at 10:58 am

Hum, this is real nice.This topic interest me and this article has educated more.

Damion Toothill on September 7th, 2011 at 4:27 am

I definitely wanted to develop a brief remark so as to express gratitude to you for those pleasant strategies you are writing here. My considerable internet search has now been paid with extremely good points to write about with my guests. I ‘d tell you that most of us site visitors actually are unequivocally lucky to be in a really good site with many brilliant individuals with interesting suggestions. I feel truly fortunate to have seen your webpages and look forward to some more fun minutes reading here. Thanks a lot once again for all the details.

auto build it review on October 22nd, 2011 at 10:08 am

Thank you intended for any other beneficial blog. Where more may I am getting of which kind of info published in such a perfect manner? I have some sort of mission of which I am simply at this point operating with, in addition to I have also been at the glance available intended for like information.

sargento coupons on December 6th, 2011 at 4:33 am

Does your ωebsite hаνe a contact page? I’m having problems locating it but, I’ԁ like
tο send уou an email. ӏ’ve got some recommendations for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it develop over time.

Feel free to surf to my web page … Charlene

Charlene on February 23rd, 2013 at 3:49 am

Good day! I know this is kinda off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

strona gÅ‚Ã³wna on April 9th, 2013 at 7:57 pm

Great delivery. Solid arguments. Keep up the good work.

called twitter on April 12th, 2013 at 10:10 am

p51 labs

Ideas. Experiments. Interests.

Re-Rediscovering the Button Tag