Google's Imageless Buttons...

Question

There have been a few articles recently about Google's new imageless buttons:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

I really like how these new buttons work in Gmail. How can I use these or similar buttons on my site? Are there any open source projects with a similar look & feel?

If I wanted to roll my own button package like this using JQuery/XHTML/CSS, what elements could I use? My initial thoughts are:

1. Standard <input type="button"> with css to improve the look (the design article talked mostly about the css/imges involves.)

2. Jquery javascript to bring up a custom dialog rooted to the button on the "onclick" event which would have <a> tags in them and a search bar for filtering? Would a table layout for that popup be sane?

I'm terrible at reverse engineering things on the web, what are some of the tools that I could use to help reverse engineer these buttons? Using Firefox's web developer toolbar I can't really see the css or javascript (even if it is minified) that is used on the buttons popup dialogs. What browser tool or other method could I use to peek at them and get some ideas?

I'm not looking to steal any of Google's IP, just get an idea of how I could create similar button functionality.

Answer 1

You could try using the Firebug plugin for Firefox to view the CSS on the button.

Answer 2

The Web Developer Toolbar has a view style information under the css menu that will tell you what css is applied to an item. There is also the Edit CSS feature in that menu that will let you change the CSS on the fly to see how it affects the page.

Answer 3

However you decide to do it, make sure you first render the page with the default:

<input type="submit" value="submit" />

... And then use jQuery to swap the input element with your custom button that has an onClick event. This will ensure that people without JavaScript enabled will still be able to use your site.

Usability should come first!

Answer 4

This is their "Archive" Button, according to Firebug.

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

The CSS is more than I care to organize/paste for this. Perhaps it's just me, but when the markup/css become this heavy, I think I would much rather USE AN IMAGE (or a couple images as backgrounds. Better yet, Sprites). Besides, an image for this button would be less than a single K.

As much as I love Google, this seems a bit overkill.

---

Update: Google is a unique case. If you're a massive site and you wish to internationalize your content, then this image-less technique is actually really cool. It allows you to apply just about any written language to your UI, without needing to generate new images, or fear of breaking your buttons.

See Question: What are the advantages of using an imageless button?

Answer 5

The biggest problem you are going to have will be making it work across browsers.

I think you should strongly consider whether you really need it ... Google gets a lot of bang for the buck by making something like this because of the vast number of buttons and languages that they need; I suspect that most sites and applications would be just as well-off using an image.

An open-source component is a good idea, though: spread the wealth and effort widely.

Answer 6

-- EDIT -- I didn't see the link in the original post. Sorry! Will try and re-write to reflect actual question

StopDesign has an excellent post on this here. [edit 20091107] These were released as part of the closure library: see the button demo.

Basically the custom buttons he shows are created using a simple bit of CSS.

He originally used 9 tables to get the effect:

But later he used a simple 1px left and right margin on the top and bottom borders to achieve the same effect.

The gradient is faked by using three layers:

All of the code can be found at the Custom Buttons 3.1 page. (although the gradient without the image is only working in Firefox and Safari)

Step by Step Instructions

1 - Insert the following CSS:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - Use one of the following ways to call it (more can be found in the links above)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

or

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

Answer 7

The majority of the work here probably won't be the design - those posts are already an excellent How-To on the gradient effects.

The problem is getting this working in all browsers, or more specifically the quirky piles of rubbish that are IE6 and IE7.

I think you're on the right track with a standard button that gets re-written with jQuery - that way you'll still be accessible for screen readers and can degrade nicely in really old browsers.

For the HTML I think your best bet is to visit Gmail with each browser and see what HTML is produced - I'd expect it to be completely different for IE6, IE7, (also depending on whether they need quirks-mode) and everything else.

Answer 8

You could use this jquery plugin I've developed. The buttons work pratically anywhere and since it's a plugin they're easy to set up and configure.

http://swizec.com/code/styledButton/

Answer 9

These were released as part of the closure library: see the button demo

Answer 10

The post with a link to the closure library does not apply. What was released as part of the closure library uses buttons with gradients.

The other solutions listed are useless. You cannot go from there and get these buttons working on every browser Gmail has them working. What Bowman shows on his site is not working code.