07 Feb

Reusable Imageless Google Custom Buttons

Buttons, License Free

Leave a Comment

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.

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

Sponsors

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?

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact