WebAppers

/ best free open source web resources /

Shopify

How to Create a Realistic Looking Button with CSS3

Posted · Category: Buttons, License Free

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.

3d-buttons-css3

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

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

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons