Espectacular botón 3D realizado con CSS3

By: Iván Dangerfielden sábado, marzo 15, 2014
En está oportunidad me gustaría compartir un botón elaborado puramente con CSS3, en tres dimensiones o 3D, que me ha cautivado gratamente su diseño. Las maravillas que se pueden hacer con Cascading Style Sheets 3 o sus siglas CSS3, verdad. Su creador y el diseñador del botón, y del proyecto, se denomina Simonpicos, en el enlace del creador, puedes ver la demostración del botón creado, o también, lo puedes visualizar a continuación en vivo y en directo, para ver su ejecución, del diseño al que nos hemos referido anteriormente.
Push me!
Añade en Blogger el CSS antes de ]]></b:skin>!

/* Beginning Button 3D by http://www.aizumblog.com */
.boton3d {
	position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 3em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
	width: 160px;
	text-align: center;
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

.boton3d:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}
/* End of Button 3D by http://www.aizumblog.com */

Usa el HTML dónde quieres que se vea el botón!

<div class="boton3d">
<a href="Aquí_el_enlace;">Nombre_del_botón</a></div>

Get free premium widgets for your blog and website.