In today's video quick tip, we'll use the lesser known inset parameter when creating CSS3 box shadows to properly style the hover and active states of a button.

Remember: don't always be so quick to jump back to Photoshop when you need a few small changes. It's better for you (and the web) if you first ask yourself, "Can we accomplish this with simple CSS?"

Final Source

body {
	margin: 200px auto;
}

a {
	background: url(button.png) no-repeat;
	width: 130px; height: 130px;
	margin: auto;
        outline: none; 
	display: block;
	text-indent: -10000px;
	
	-webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	-webkit-border-radius: 90px;
	
	-moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	-moz-border-radius: 90px;
	
	box-shadow: 0 0 8px 1px rgba(0,0,0,.2);
	border-radius: 90px;	
}

a:hover {
	-webkit-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);
		
	-moz-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);
	
	box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.1);		
}

a:active {
	-webkit-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
		
	-moz-box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
		
	box-shadow: 
		0 0 8px 1px rgba(0,0,0,.2),
		inset 0 0 20px 6px rgba(0,0,0,.2);
}