css3 button push effect

css3 버튼 눌리는 효과

	click

.button {
	position: relative;
	display: inline-block;
	margin: 0 auto;

	-webkit-border-radius: 10px;

	-webkit-box-shadow: 
	  0px 3px rgba(128,128,128,1), /* gradient effects */
	  0px 4px rgba(118,118,118,1),
	  0px 5px rgba(108,108,108,1),
	  0px 6px rgba(98,98,98,1),
	  0px 7px rgba(88,88,88,1),
	  0px 8px rgba(78,78,78,1),
	  0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

	-webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
	background-color: #000;
	-webkit-border-radius: 10px;
	-webkit-transition: -webkit-transform .1s ease-in-out;

	display: inline-block;
	padding: 5px 40px 5px 40px;

	color: #fff;
	font-weight: 400;
	font-size: 1.4em;
}

.button:active {
	-webkit-box-shadow: 
		 0px 3px rgba(128,128,128,1),
		 0px 4px rgba(118,118,118,1),
		 0px 5px rgba(108,108,108,1),
		 0px 6px rgba(98,98,98,1),
		 0px 7px rgba(88,88,88,1),
		 0px 8px rgba(78,78,78,1),
		 0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}

.button:active span{
	-webkit-transform: translate(0, 5px); /* depth of button press */
}