CSS de los botones del nuevo diseño de GMail

Gracias a @envatowebdev me enteré de una entrada en el blog de gmail donde presentan una preview del nuevo diseño de gmail.

Como los botones me gustaron mucho, me tome el tiempo de copiarlos para ponerlo a disposición de todos. He aquí el resultado.

Demo

Pueden acceder a la demo desde: http://jsfiddle.net/XJfGe/2/.

Código CSS:

.button {
    border: 1px solid rgba(0, 0, 0, 0.1);
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px;
    
    text-decoration: none;
    text-transform: uppercase;
    color: #666;
    
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    
    margin: 0 3px;
    padding: 7px 12px;
    
    background: #f1f1f1;
    background-image: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f5f5f5), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1); 
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    
    -moz-transition: border-color .218s;
    -o-transition: border-color .218s;
    -webkit-transition: border-color .218s;
    -ms-transition: border-color .218s;
    transition: border-color .218s;
}

.button:hover {
    -moz-transition: border-color .218s;
    -o-transition: border-color .218s;
    -webkit-transition: border-color .218s;
    -ms-transition: border-color .218s;
    transition: border-color .218s;
    
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    border-color: #939393;
    color: #333;
}

.button:active {
	border-color: #444444;

    background: #f5f5f5;
    background-image: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f1f1f1), to(#f5f5f5));
    background-image: -webkit-linear-gradient(top, #f1f1f1, #f5f5f5); 
    background-image: -moz-linear-gradient(top, #f1f1f1, #f5f5f5); 
    background-image: -ms-linear-gradient(top, #f1f1f1, #f5f5f5); 
    background-image: -o-linear-gradient(top, #f1f1f1, #f5f5f5); 
    background-image: linear-gradient(top, #f1f1f1, #f5f5f5);
}

.button.blue {
    color: #fff;
    border-color: #427ede;

    background: #4787ed;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#4787ed));
    background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed); 
    background-image: -moz-linear-gradient(top, #4d90fe, #4787ed); 
    background-image: -ms-linear-gradient(top, #4d90fe, #4787ed); 
    background-image: -o-linear-gradient(top, #4d90fe, #4787ed); 
    background-image: linear-gradient(top, #4d90fe, #4787ed);

    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.button.blue:hover {
    border-color: #2f5bb7;

    background: #357ae8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#357ae8));
    background-image: -webkit-linear-gradient(top, #4d90fe, #357ae8); 
    background-image: -moz-linear-gradient(top, #4d90fe, #357ae8); 
    background-image: -ms-linear-gradient(top, #4d90fe, #357ae8); 
    background-image: -o-linear-gradient(top, #4d90fe, #357ae8); 
    background-image: linear-gradient(top, #4d90fe, #357ae8);
}

.button.blue:active {
	background: #4d90fe;
}

.button.red {
    color: #fff;
    border: 1px solid transparent;
    
    background: #d14836;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dd4b39), to(#d14836));
    background-image: -webkit-linear-gradient(top, #dd4b39, #d14836); 
    background-image: -moz-linear-gradient(top, #dd4b39, #d14836); 
    background-image: -ms-linear-gradient(top, #dd4b39, #d14836); 
    background-image: -o-linear-gradient(top, #dd4b39, #d14836); 
    background-image: linear-gradient(top, #dd4b39, #d14836);
    
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	
	text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

.button.red:hover {
    border-color: #B0281A;
    border-bottom: 1px solid #af301f;

    background: #c53727;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dd4b39), to(#c53727));
    background-image: -webkit-linear-gradient(top, #dd4b39, #c53727); 
    background-image: -moz-linear-gradient(top, #dd4b39, #c53727); 
    background-image: -ms-linear-gradient(top, #dd4b39, #c53727); 
    background-image: -o-linear-gradient(top, #dd4b39, #c53727); 
    background-image: linear-gradient(top, #dd4b39, #c53727);
}

.button.red:active {
    -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
}

Código HTML:

<ul class="nav">
	<li><a class="button" href="index.html">Inicio</a></li>
	<li><a class="button blue" href="#">Contacto</a></li>
	<li><a class="button red" href="#">Acerca</a></li>
</ul><!-- .nav -->

Cualquier recomendación es bienvenida!