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;
	}

Click me!

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)
}

Click me!

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;
}

Click me!

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;
}

Click me!

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;
}

Click me!

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; 	
		}

Click me!