Boton Css con efecto

Debo decir que la verdad este botón es de los que más me encanta porque me costó un buen entender cómo hacerlo y no recuerdo de donde había obtenido la explicación sobre el tipo de códigos que está escribiendo pero la verdad siento envidia de mi mismo XD la verdad porque me gusta este botón pero no sé donde se vería bien ponerlo pero de todos modos les regalo el código de los estilos para que ustedes puedan implementarlo en sus sitios web y claro respetando como siempre los derechos sobre la obra vale?.
Bueno la manera de funcionar de el botón ya en acción es como en el siguiente ejemplo:

Presióname :3

Los estilos son los siguientes:

.btn span {
display: inline-block;
padding: 10px 20px;
background: #3194c6;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
background: #3194c6;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
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;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2";
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;
}
.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);
}
.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);
}

.btn:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
.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;
}

Y se implementa con:

<a class="btn"><span><font color="white">Texto del botón</font></span></a>