WebAppers

/ best free open source web resources /

Shopify

Reusable Imageless Google Custom Buttons

Posted · Category: Buttons, License Free

Until some future version of HTML gives us new native controls to use in a browser, at Google, they have been playing and experimenting with controls they call “Custom Buttons” in their apps (among other custom controls). These buttons just launched in Gmail and Google Reader recently.

The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.

Google Buttons

Requirements: -
Demo: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
License: License Free

8 Comments
  • http://f055.net f055

    Really nice tip! We should all use fake images more often! I’ve been saying it in my recent post:

    2. Don’t use images if you can get the same effect with CSS
    ( http://f055.net/article/5-tips-on-being-smart-with-html-and-css/ )

  • http://www.twitter.com/miketaylr mike t.

    What makes you say that these are “License Free”? Nowhere in the article does it indicate that–in fact the visual spec is purposely displayed as a thumbnail to prevent showing too much proprietary info.

  • Ray Cheung

    @ mike.t

    What I mean “License Free” is that there is no license agreement we can find for this tutorial. You are free to use this technique to create these buttons.

  • http://www.rustylime.com Mikey

    In typical Google style, web standards and semantics are not only thrown out the window, but also ran over by a passing bus driven by Larry and Serge.

    No thanks. I’ll stick with proper web development practices. And FYI, the exact same look and feel can be accomplished with significantly less code using CSS and no javascript. So exactly what is the point of this Google exercise?

  • http://www.rustylime.com Mikey

    Oh and another thing…it kills accessibility, so people who rely on a keyboard for getting around the internet (those who have limited mobility and can’t use a mouse) are screwed.

    Nice one Google! You screwed web standards, semantics and disabled users all in one hit!

  • http://svendigital.co.za/ Raithlin

    Just mulling this around in my head – couldn’t this be successfully implemented within a button (type=”submit”)? That would be semantic, accessible, and follow web standards – or do I assume too much?

  • http://www.rustylime.com Mikey

    “That would be semantic, accessible, and follow web standards – or do I assume too much?”

    When it comes to Google, yes that is too much to expect. They are easily one of the least web standards compliant companies you will find.

  • MikeyIsAnIdiot

    Hey Mikey

    Did you even read the article? The custom buttons were created because the existing HTML controls were not able to do the job required. They needed to be rendered exactly the same across all environments, be fast and flexible, and provide much more interaction than capable by the simple buttons and dropdown buttons we currently have.

    They also dont use javascript except for advanced features like dropdowns with auto-suggest etc.

    The accessibility is already handled as you can see the various specs of the button in the thumbnail of the Google design specs.

    Get off your high horse and try getting things done first before complaining. Maybe you’re just bitter after they refused to hire your dumb ass?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons