Отличная демо-анимация, демонстрирующая, как можно достичь больших эффектов для кнопки, используя только маленький кусочек разметки и новые правила CSS3.

Она выглядит потрясающе, и имеет эффект плавного нажатия.

.btn {		
	display: inline-block;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 
		0 8px 0 #1a74a1,
		0 15px 20px rgba(0,0,0,.35);
	-moz-box-shadow:
		0 8px 0 #1a74a1,
		0 15px 20px rgba(0,0,0,.35);
	box-shadow:
		0 8px 0 #1a74a1,
		0 15px 20px rgba(0,0,0,.35);
	-webkit-transition: -webkit-box-shadow .2s ease-in-out;
	-moz-transition: -moz-box-shadow .2s ease-in-out;
	-o-transition: -o-box-shadow .2s ease-in-out;
	transition: box-shadow .2s ease-in-out;
	}
.btn span {	
	display: inline-block;
	padding: 10px  20px;
	font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(19,65,88,.8);
	background: #3194c6;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
	background: -moz-linear-gradient(#3194c6, #5bacd6);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	-webkit-transition: -webkit-transform .2s ease-in-out;
	-moz-transition: -moz-transform .2s ease-in-out;
	-o-transition: -o-transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
}
	
.btn:active {	
	-webkit-box-shadow: 
		0 8px 0 #1a74a1,
		0 12px 10px rgba(0,0,0,.3);
	-moz-box-shadow: 
		0 8px 0 #1a74a1,
		0 12px 10px rgba(0,0,0,.3);
	box-shadow: 
		0 8px 0 #1a74a1,
		0 12px 10px rgba(0,0,0,.3);
	-webkit-transition: -webkit-transform 0s ease-in-out;
	-moz-transition: -moz-transform 0s ease-in-out;
	-o-transition: -o-transform 0s ease-in-out;
	transition: transform 0s ease-in-out;
	}
.btn:active span {	
	-webkit-transform: translate(0, 4px);
	-moz-transform: translate(0, 4px);
	-o-transform: translate(0, 4px);
	transform: translate(0, 4px);
	-webkit-transition: -webkit-transform 0s ease-in-out;
	-moz-transition: -moz-transform 0s ease-in-out;
	-o-transition: -o-transform 0s ease-in-out;
	transition: transform 0s ease-in-out;
}

Пример