4 ms·

Creating a Realistic Looking Button with CSS3

61 points by mikexstudios 17y ago

jdelsman 17y ago
Here it is without images: http://gist.github.com/364727 http://gist.github.com/364727
jayair 17y ago
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 http://twitter.com/dtinth/status/11969821668
rscott 17y ago
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 17y ago
Doesn't work on IE8. Active state missing on Opera. It looks nice though.
DenisM 17y ago
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 17y ago
  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 17y ago
    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.
- dkersten 17y ago
  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.
jayair 17y ago
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.
- saurabh 17y ago
  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.
- DenisM 17y ago
  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-10.41.15-am 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. :-)
- eswat 17y ago
  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.
  - jayair 17y ago
    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.
  - Raphael 17y ago
    You can just have JavaScript that switches out one tag for a bunch.
carterac 17y ago
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 17y ago
  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 17y 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 http://pastebin.me/edc9b5fefc2cd756c7dd92452407a5b0

61 points by mikexstudios 17y ago

Here it is without images: http://gist.github.com/364727 http://gist.github.com/364727

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 http://twitter.com/dtinth/status/11969821668

rscott 17y ago

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 17y ago

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

DenisM 17y ago

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 17y ago
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 17y ago
  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.
dkersten 17y ago
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.

jayair 17y ago

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.

saurabh 17y ago
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.
DenisM 17y ago
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-10.41.15-am 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. :-)
eswat 17y ago
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.
- jayair 17y ago
  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.
- Raphael 17y ago
  You can just have JavaScript that switches out one tag for a bunch.

carterac 17y ago

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 17y ago
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 17y 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 http://pastebin.me/edc9b5fefc2cd756c7dd92452407a5b0