Alex Rivera | Logout

Google's Imageless Buttons

Asked 2009-02-06T15:12:31.980
90

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

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.

javascript html css gmail reverse-engineering
Edit
Report

2 Answers

32

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?

answered 2009-02-10T20:27:47.190
5

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

answered 2009-02-06T15:15:59.977

Your Answer