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
• htt

Answer 1

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

Answer 2

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 3

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

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!