14 Apr

How to Create a Realistic Looking Button with CSS3

Buttons, License Free

Leave a Comment

How to Create a Realistic Looking Button with CSS3? The whole idea is to use a combination of subtle effects to create a three dimensional object. The idea is that: The button is set into the canvas. The texture of the button is different from the canvas and the surface is slightly raised. And the text of the button is pressed into it.

By going into the detail you can use these techniques in your designs. Think about your designs in 3D. It is less about using the specific border effects and more about using them together to achieve an overall look.

Requirements: CSS3
Demo: http://blog.anomalyinnovations.com/2010/03/creating-a-realistic…
License: License Free

Sponsors

Comments

http://twitter.com/farof Mathieu Merdy

Ok, these buttons are nice, and it’s not the first tutorial of this kind. Had to said it, because both of it are not my point.

My point is, reading the title, I was shocked: “What’s a realistic button ?”

Do these buttons look like real life buttons ? Are they photo-realistic ? What does “3D button” means ? Do we even want “realistic looking” ?
I don’t think so.

Saying that they are “realistic looking buttons” is false, and totally missing the point.

Buttons need to be readable, easy to understand, and the look and feel of their different states must have a big impact on the user: he needs to know by looking at them what to do and what’s happening.

And the buttons in this article do that!

They are not realistic looking, they’re realistic feeling.
Abba Bryant

Nested <b> tags? CSS3 with no fallback (.htc, images, nothing) for any browsers that don’t grok the stylesheet and wildly inconsistent across different browsers even when they do have CSS3 support.

Still has some ways to go before they are really useful to a wider developer audience – but if you don’t care about semantics or cross browser support as much right now I think they look a little better than the ZURB buttons linked in the author’s blog post.
http://www.brettwidmann.com Brett Widmann

This is a great tutorial. Thanks for sharing.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact