CSS3 Buttons | Hacker News Reader

CSS3 Buttons

lab.simurai.com

168 pointsalexkiwi41 comments

This is how this page looks in IE6: http://i.imgur.com/PVT7u.png

Note I understand it's an experiment, just for curiosity

To be honest, I thought it would look much worse. I would say it is even acceptable if you design for a website with a tech-savvy audience.

Yeah, that looks like it degrades rather gracefully. As long as (1) the text is still readable, and (2) the buttons are clickable, I say people should just go for it.

With a little more effort you should even be able to make them look a bit more like buttons in older browsers or Internet Explorer.

IE8 looks the same.

Brilliant - kinda looks like hard candy. But...

If you're planing to use the BonBon buttons for production.. Well, I don't recommend it.. yet! Yes, I'm sorry, life is hard.

As long as there's no license attached I wouldn't use it in production anyway.

Why? Getting sued over the CSS used for buttons?

They feel laggy. It's like there is a delay added to their animations on mouse hovering... or is it just ineffective? Can't say I like it.

There is a delay for the button to "shift" up AND glow. That's two steps and most buttons have only a single visual feedback, so it feels like it's laggy due to this extra step. I agree that it's a bit too much.

Feels responsive here (Safari 5).

Horribly laggy (1 second from click to change of appearance) on my EeePC in FF, where the buttons look good. Not laggy in Chrome where the buttons look a mess.

Aaaah my eyes! (After viewing the page in IE8.)

These buttons don't degrade gracefully at all.

I can only imagine. They're unusable even in Safari 4 (the reflections turn into white boxes that cover up most of the buttons).

Of course, when you're pushing the envelope, you're pretty much by definition going to leave the laggards who stick to older technology behind.

From the point of view of the user, I strongly subscribe to the school of thought that says build it working for everyone and enhance for the users that have better browsers. These buttons, as the post itself says at the end, are just not ready for production.

I missed the part that says it's not ready for production when I first read it. Here's part of the quote from the end:

> This is just a demo and not meant to be used on your next project that targets the average internet user.

I'm curious as to why he didn't use regular buttons. That would degrade ... (haven't checked the code tho)

I tried his button styles on submit and button inputs. His basic "button" style and the various color and shape variations still work great and degraded well when I checked in IE7.

You can view the results here: http://www.webcodeshare.com/agx3ZWJjb2Rlc2hhcmVyDwsSB1dlYmNv...

Only a small addition was needed to turn off left and right borders.

I also tried that, but I loose the icons (even in chrome).

Has anybody made an @font-face package with icons? That would be super helpful and nice for doing icons on buttons etc...

http://pictos.drewwilson.com/ has

aren't they a massive over engineering? Like having to create the appropriate fall back for older browsers would be a real pest.

all modern browsers support font-face, I have doubts about whether they dont suffer from the fout but thats about it, people who arent web developers really dont like dealing with images, its a pretty huge pain so just being able to type some text and have a nice icons show up is a nice choice for some.

wow, that's nice. Exactly what I was looking for.

Hitting inspect element in Chromium on Linux gives me an "Aw Snap" crash. :-\

I've been getting a lot more Aw Snaps after upgrading to Chromium 7.whatever on Linux.

It happens all the time when I'm searching for things on google.

No issues here, Chromium 7.0.507.0 (57505) on Ubuntu 10.10a3

Are we going to see "Flaming" CSS3 buttons anytime soon!? I mean yes mark up is just a href tag but the CSS itself is a bit huge when you look at the styling?

I learned a few bits about CSS3, such as splitting up border radius for top and bottom.

I guess sexy is a relative term.

My soul weeps for their beauty

There must be a bug in the lastest Dev version of Chrome. Some strange transparent white box on the "top" of the buttons.

http://imgur.com/CTVFM.png

Not a Chrome bug so much as an artifact of Windows blur APIs as far as I can tell. Shadows and blurs look less Gaussian and more bidirectional motion blurred on Windows in Chome and other modern browsers.

It's not just the latest dev version. I'm seeing it in 5.0.375.127 on Windows, which is not even the latest released version.

...if you think children's vitamins are sexy.

Just because you can doesn't mean you should.

Shouldn't what? Experiment and write a tutorial?

Maybe you wouldn't ever put them on a site, and maybe I wouldn't ever put them on a site, but the state of the art only advances when people create experiments like this and then share the process.

Snark is easy. Coming up with experiments and then writing about them is far more impressive, even if the experiments don't ever see the practical application.

Not all HTML and CSS happens in a browser. Many interfaces are written that are rendered by webkit, and in those instances this is awesome.

Could you give some examples, please?

I don't have examples, but many "web developers" create desktop apps that thinly wrap webkit or their rendering engine of choice to permit HTML/CSS markup for their GUI.

I do this with Prism all the time to deploy web apps to my company, but you could equally embed webkit yourself into any app - and use these buttons in a single (known working) environment.

An example would be Wolfire's upcoming game Overgrowth. Their level editor has an embedded webkit browser which is used to render their tool palettes. Everything is done in HTML/CSS.

Reply on news.ycombinator.com