title: Google's Imageless Buttons
body: <p>There have been a few articles recently about Google's new imageless buttons:</p>
  
  <ul>
  <li><a href="http://stopdesign.com/archive/2009/02/04/recreating-the-button.html" rel="noreferrer">http://stopdesign.com/archive/2009/02/04/recreating-the-button.html</a></li>
  <li><a href="http://stopdesign.com/eg/buttons/3.0/code.html" rel="noreferrer">http://stopdesign.com/eg/buttons/3.0/code.html</a></li>
  <li><a href="http://stopdesign.com/eg/buttons/3.1/code.html" rel="noreferrer">http://stopdesign.com/eg/buttons/3.1/code.html</a></li>
  <li><a href="http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html" rel="noreferrer">http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html</a></li>
  </ul>
  
  <p>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 &amp; feel?</p>
  
  <p>If I wanted to roll my own button package like this using JQuery/XHTML/CSS, what elements could I use?  My initial thoughts are:</p>
  
  <ol>
  <li><p>Standard <code>&lt;input type="button"&gt;</code> with css to improve the look (the design article talked mostly about the css/imges involves.)</p></li>
  <li><p>Jquery javascript to bring up a custom dialog rooted to the button on the "onclick" event which would have <code>&lt;a&gt;</code> tags in them and a search bar for filtering?  Would a table layout for that popup be sane?</p></li>
  </ol>
  
  <p>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?</p>
  
  <p>I'm not looking to steal any of Google's IP, just get an idea of how I could create similar button functionality.</p>