Botones estilo Gmail: Demo – Código

Los nuevos botones que vienen en el rediseño me han encantado. Son unos botones grandes en tonos grises con unas transiciones muy suaves al situarnos sobre ellos. Con la idea de usarlos algún día he recreado los botones.

Os dejo el código por si os han gustado tanto como a mí y queréis usarlo: Se trata solo de CSS y un poco de HTML, no ha hecho falta javascript.

Código Html

Inicio
Nuevo


Archivar
Eliminar
Responder
Spam

Código CSS

.grupobotones { float: left; }
.boton {
    transition: border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition:border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

    background-color:#F1F1F1;
    border: 1px solid rgba(0, 0, 0, 0.0976563);
    color: #666;
    display: inline-block;
    font-weight: bold;
    height: 28px;
    margin: 0 5px;
    outline: 0px none #666;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: white 0px 1px 0px;
}
.boton:hover {-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; border-color:#747474; outline-color: #333;}

.boton a { color: #666; text-decoration: none; cursor: default; display: block; padding: 7px 10px 7px 12px;}
.boton:hover a {color: #333;}

.boton.primero {margin-right: -1px; border-radius: 2px 0 0 2px;border-right-width: 0;}
.boton.centro {margin-right: -1px;margin-left: -2px; border-radius: 0; border-right-width: 0;}
.boton.ultimo {margin-left: -2px; border-radius: 0 2px 2px 0;}

.boton.primero:hover,
.boton.centro:hover {border-right-width: 1px;}
.boton.primero:hover a,
.boton.centro:hover a {padding-right: 9px;}

.boton.naranja {
	background-color: #dd493b;
    background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    background-image: linear-gradient(0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    background-image: -moz-linear-gradient(0% 0%, 0% 100%, from(#DD4B39), to(#D14836));
    border-color: #B0281A #B0281A #AF301F #B0281A;
    text-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 0px;
}
.boton.naranja:hover {background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DD4B39), to(#C53727)); background-color:#dd493b;}
.boton.naranja a {color:#fff;}