Quick Tip: Don't Always Jump Back to Photoshop

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