CSS button-shadow 3d effect

In this quick tutorial you can find out how to create a 3d button effect for "almost flat design" with CSS3 box-shadow.

Demo

Button

Code

Since this tutorial is focused on box-shadow we won't show any other button styles. If you want to see the rest, visit this tutorial about button styling.

-moz-box-shadow: 0px 4px 0px 0px #0D8D88;
-webkit-box-shadow: 0px 4px 0px 0px #0D8D88;
box-shadow: 0px 4px 0px 0px #0D8D88;

This shadow effect is used very often on the web. Note that you have to adjust the shadow-color for different button colors.