Botón estilizado: efecto translate, solo CSS3

Un sencillo botón con ensanchamiento en el hover. Es muy sencillo y se puede aplicar a diferentes componentes, creamos un estilo en este caso es ".button" y definimos el estilo del botón. Después creamos el estilo "hover".
Hemos de tener en cuenta el ancho (width) en ".button:hover" porque al hacer hover si queremos que se quede en el centro, tenemos que restarle al "margin-left" ese ancho para conseguir mantenerlo en el mismo sitio. Además de "translate", podemos utilizar otras propiedades como: "rotate", "scale", "skew" ej: -moz-transform: rotate(180deg) scale(1.5) skew(10deg) translate(50px);

Código CSS:

.boton{
cursor: pointer;
display: inline;
font-size: 12px;
text-align: center;
font-weight: bold;
width: 60px;
padding: 5px 10px;
color: #f2f2f2;

text-shadow: 0px 1px 0px #262626;
border: 1px solid #3f3f3f;
background: #3f3f3f;
box-shadow: inset 0px 1px 0px #515151;
-moz-box-shadow: inset 0px 1px 0px #515151;
-webkit-box-shadow: inset 0px 1px 0px #515151;
-goog-ms-box-shadow:inset 0px 1px 0px #515151;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-goog-ms-border-radius: 4px;
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}

.boton:hover{
margin-left: -80px;
width: 80px;
color: #00bbff;
transform: translate(50px);
-webkit-transform: translate(50px);
-moz-transform: translate(50px);
-o-transform: translate(50px);
-ms-transform: translate(50px);
}

Código HTML:

<input class="boton" type="submit" id="submit" value="I like it!" />