

Creating a Realistic Looking Button with CSS3 - mikexstudios
http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

======
jayair
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.

~~~
eswat
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.

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

~~~
wlievens
Trivial, with jQuery!

------
DenisM
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.

~~~
jayair
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.

~~~
DenisM
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.

------
rscott
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.

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

------
jayair
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>

------
carterac
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.

~~~
jayair
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.

------
daleharvey
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>

