Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Espectacular botón 3D realizado con CSS3


button 3d


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!


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>


Y por último la fuente del botón!

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'/>


Aizum Blog, sábado, marzo 15, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9