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

By: felipec

felipec — Sat, 07 Feb 2009 19:43:59 +0000

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

By: iliad

iliad — Sat, 07 Feb 2009 16:22:34 +0000

“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

By: dclements

dclements — Fri, 06 Feb 2009 23:40:27 +0000

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

By: ThomasHansen

ThomasHansen — Fri, 06 Feb 2009 20:47:58 +0000

@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…

By: ragjunk

ragjunk — Fri, 06 Feb 2009 18:19:33 +0000

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.

By: iliad

iliad — Fri, 06 Feb 2009 16:44:07 +0000

Darn! I apologize for the mess above, forgot that the tags will actually be used as actual tags :/
I was referencing ,

By: iliad

iliad — Fri, 06 Feb 2009 16:41:53 +0000

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.

By: Jordan1

Jordan1 — Fri, 06 Feb 2009 15:01:06 +0000

@ThomasHansen: You mean I can draw a picture of Homer Simpson with CSS without using images, but I can't get rounded corners?

By: ThomasHansen

ThomasHansen — Fri, 06 Feb 2009 10:04:45 +0000

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…

By: gautamkishore

gautamkishore — Fri, 06 Feb 2009 10:04:42 +0000

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.