Construir un Botón Practico con CSS3

Hoy en día los navegadores modernos tienen acceso a cosas como gradientes, bordes redondeados, sombras, tipo de letras, etc. Por lo que podemos construir un Botón Practico con CSS3 sin la necesidad de utilizar imágenes, con lo que se puede decir que por fin podemos sacar ventaja de estas cosas, cuando se quiere crear elementos visuales como los botones y hacer que se vean perfectos, aquí un ejemplo de como hacerlo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Buttons</title>
<style>

/* CUSTOM FONT */
@font-face {
font-family: 'EfonRegular';
src: url('font/EFON-webfont.eot');
src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}	

body {
width: 400px;
margin: 200px auto;
background: #666;
}

.button {
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;

/* BACKGROUND GRADIENTS */
background: #014464;
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 

/* BORDER RADIUS */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

border: 1px solid #368DBE;
border-top: 1px solid #c3d6df;

/* TEXT SHADOW */

text-shadow: 1px 1px 1px black;

/* BOX SHADOW */
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}

/* WHILE HOVERED */
.button:hover {
background: #014464;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}

/* WHILE BEING CLICKED */
.button:active {
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
}
/* FONT GLYPH (MOSTLY FOR FUN) */
.button:before {
font-family: EfonRegular;
content: 'v';
color: #09232F;
font-size: 90px;
float: left;
margin-left: 35px;
margin-right: -10px;
text-shadow: 0 1px 0 #4190AF;
}

</style>
</head>
<body>
     <a href="#" class="button"> Follow Me </a>
</body>
</html>

Demo

Recomendado