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

5 Comments

× New

Sign In to comment

fanniemayqueen57:

Actually figured it out :) However, I would like to ask a question. I have a fixed menu bar at the top of my page and these buttons go over it instead of under it when I scroll... how can I fix that

fanniemayqueen57:

I would love to use this! I thought I could give it a class, but what am I doing wrong... in the css I put .button before the a and the a:active and in the html I put <a class="button" href...etc. but it's not working

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+