Ajax Loader
×

Fancy 3D-Button

A simple button, styled with different box-shadows for a 3D-look. The first value of the box-shadow is to give height / depth to the button and the second value is to give shadow to it. There is nothing else in this buttons except this clever use of box shadows. When clicked, the size of the box shadows is decreased to lower the depth and make it look like its being pressed. 

Also, transition effects are used to add a little animation on the push effect. It works well in Chrome, Safari, Firefox and Opera.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

2 Comments

× New

Sign In to comment

philippvonarx:

Simple and really good looking! Thx.

Any idea how to place two different looking buttons (other color, size etc.) on the same page?
Renaming the CSS to b instead of a would work but hyperlinks don't with <b.... :)

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+