Shadow Boxer

The Basic Setup

Let's start with basic flat-color orange button. It's a minimalist look that will certainly do the job in older browsers

The Basics

<a href="#" class="bigorange">Click me!</a>
a.bigorange {
margin: 1em;
display:block;
background:#f60;
border:2px solid #EE2E26;
text-align:center;
text-decoration:none;
color:#FFEFDF;
padding:10px;
font:bold 24px/120% "Lucida Grande", Arial, Helvetica, sans-serif;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
} a.bigorange:hover {
background:#f82;
border:2px solid #EE2E26;
color:#fff;
}

Step 1:Add external shadows for depth

a.bigorange {

-webkit-box-shadow:
3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1) }

Step 2: Add a soft burnt orange base layer

a.bigorange {

-webkit-box-shadow:
3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1), inset 0px 25px 25px #930; }

Step 3: Add a lighter, sharper reflection color

a.bigorange {

-webkit-box-shadow:
3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1), inset 0px 15px 2px rgba(240, 150, 69, .5), inset 0px 25px 25px #930; }

Step 4: Add a medium orange to moderate the reflection

a.bigorange {

-webkit-box-shadow:
3px 3px 6px rgba(0, 0, 0, .2), 0px 0px 3px rgba(0, 0, 0, .1), inset 0px 5px 12px #930, inset 0px 15px 2px rgba(240, 150, 69, .5), inset 0px 25px 25px #930; }

Step 5: Add a hover effect

a.bigorange {

} a.bigorange:hover { -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .4), 0px 0px 3px rgba(0, 0, 0, .1), inset 0 0 4px rgba(0, 0, 0, .6), inset 0px 10px 12px #930, inset 0px 20px 2px rgba(240, 150, 69, .5), inset 0px 25px 25px #930; }