Creating a Realistic Looking Button with CSS3 | Hacker News Reader

Creating a Realistic Looking Button with CSS3

blog.anomalyinnovations.com

61 pointsmikexstudios17 comments

I'm thinking of writing a couple more posts about the little details that improve the overall look and feel of interfaces. If you guys have any thoughts or ideas about it, do let me know.

Definitely, i like your style. I am learning how to make pixel-perfect interface elements. How about the the whole armada. Maybe you could roll out a jQueryUI skin with a proper documentation on how you did it. Remeber the sleek Winamp skins we used to love so much? I couldn't find a complete walkthrough on how to make one.

I have an idea: on a touch platform when you press a button you don't see the surface of the button. In a couple of places Apple has created a nice "flare" effect:

http://skitch.com/memengoinc/n68cp/screen-shot-2010-04-10-at...

I couldn't replicate that one myself either. Maybe you can? It will probably help you designing mobile websites. :-)

This was a very great writeup. Thanks!

I’m overzealous with keeping the amount of tags in my markup minimal. The button in this post looks sharp and detailed, but it would be nice to see a comparison with the same button being constructed with less tags. ie: just the anchor and one bold tag, or just the anchor, in addition to showing the best-looking result with three tags.

A quick note about the markup: initially I was using the Google style pseudo rounded corner buttons that used 3 nested b tags. So part of this design was just me being lazy. But later I realized the alpha blending on the borders meant I needed at least 2 of them.

You can just have JavaScript that switches out one tag for a bunch.

Trivial, with jQuery!

A great, detailed description of how to make a button look 3d. I don't care so much about the CSS part, it actually explains how the "light" behaves to create the 3d impression.

I think I'll use this to recreate the same in Cocoa. Just yesterday I was going crazy trying to create a decent looking custom UIToolBar button which would work with tinting. This might be the ticket.

I would love to see you implementation. With this post I was trying to strike a balance between the 3D aspect and the CSS code to it. Glad you liked it.

I think you succeeded in that balance. While I was reading it crossed my mind that even though I don't need CSS for cocoa, having both a precisely algorithmic description in CSS and a plain-English description of the same concept really helps to internalize the content. Neither one of the two would work as well as both of them did.

I agree. I don't care much about the CSS part, but found this article very interesting and helpful in general since its so thorough and detailed and plan on using this in some desktop GUI projects.

I have little interest in CSS3 or buttons to be honest, but appreciate the love for the details here. The detailed breakdown made me smile.

Doesn't work on IE8. Active state missing on Opera. It looks nice though.

I saw this through Twitter, essentially the same thing that I have but done with just one input element. It works only on FF though. Still very impressive - http://twitter.com/dtinth/status/11969821668

Thanks for this incredible post. Having spent most of my coding days with server side languages, this opened my eyes to the art form that is front-end design.

That is exactly the type of audience I want to write it for. I've just started doing design recently. And writing this post helped articulate my ideas. But more importantly I think it can help developers get into design by using a more pragmatic approach. As opposed to the "Trial and I don't know why it looks bad" approach that I was taking a year ago.

nice article, I like the attention to details, but if you are looking for something nice and quick and easy, copied and pasted from gmail

http://pastebin.me/edc9b5fefc2cd756c7dd92452407a5b0

Reply on news.ycombinator.com