Friday, February 6th, 2009

How many engineers does it take to create a cross browser button?

Category: Component, CSS, UI

<p>So, you want to create a button that you have full control over, and you want it to work well cross browser. Shouldn’t be hard right? Wrong.

Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:

Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:

My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.

And how he got rid of the gradient image and instead uses CSS:

A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for “More Actions” can be greyed out when you don’t have something selected. The type is subtle so at first I wondered why hover/click weren’t doing anything.

Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)

Related Content:

9 Comments »

Comments feed TrackBack URI

When I saw these buttons on my gmail and google apps on http://eulogik.com , I was pretty happy to see those nice looking and so handy buttons. Now, I’m happier to know that there are no images used and those are so brilliantly designed buttons. Great work, Doug. n Thanks for explaining behind the scenes thing.

Comment by gautamkishore — February 6, 2009

I read his entire blog, and I agree on most of those parts. However I don’t think that non-image based buttons are flexible enough, I think the way to go is by using sprites in CSS. Sure the new GMail buttons are nice looking and all that, but where are the rounded corners … ;)
.
(hint; you can’t do rounded corners with this, at least not till CSS typish rounded corners make it to all class A browsers)
.
Fact is we’re coming out with a new release today which demonstrates this at; ( http://ra-ajax.org/samples/Flexible.aspx ) so in a couple of hours you’ll be able to see an alternative DOM structure with custom buttons but which are using CSS sprites as background-images which I think is a far superior solutions. For a lot of reasons…

Comment by ThomasHansen — February 6, 2009

This is brilliant! I tried doing something like this myself once – getting same looking button for , and , and having them look identical in FF, IE7 and IE6, but kept getting problems from the IE browsers (big surprise there) – the minute I’d fix something in IE7 it’ll break in IE6 and vice versa. Eventually I gave up because I just had to move on to more important things, but now I’ll definitely revisit this.

Comment by iliad — February 6, 2009

Darn! I apologize for the mess above, forgot that the tags will actually be used as actual tags :/
I was referencing <a>, <button> and <input>

Comment by iliad — February 6, 2009

I have been using the following implementation with great looking, cross-browser buttons.

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

It uses 2 images, 2 DOM elements (‘a’ and ‘span’), provides nice ‘click’ effect and works in all browsers.

Doug’s implementation has a small flaw in FF3. When clicked, it leaves a rectangular selection behind the button area.

Comment by ragjunk — February 6, 2009

@Jordan1
“You mean I can draw a picture of Homer Simpson with CSS without using images, but I can’t get rounded corners?”
.
No I mean you can’t get rounded corners from the Google Button design…

Comment by ThomasHansen — February 6, 2009

it is all there on the demo page written clear as day in the source code.

http://stopdesign.com/eg/buttons/3.0/code.html

go to the source. all of the cool stuff is in the css at the top of the page and they show you anything a coder would need to implement this himself. technically, it’s open sourced :p

Comment by dclements — February 6, 2009

“This doc attempts to show how custom buttoms with a 1px radius…”

Haha! I’m sorry, I know it’s a silly typo but it just made me laugh :D

Comment by iliad — February 7, 2009

What happened to the link cursor (clicky hand)? It’s there in the new Greader UI, but not Gmail.

http://thekingant.livejournal.com/89080.html

Comment by felipec — February 7, 2009

Leave a comment

You must be logged in to post a comment.