Botón 3D Animado con CSS3

El mundo de la web ha cambiando mucho y cada día es posible realizar operaciones en nuestros desarrollos de manera mucho más sencilla a como se hacían en el pasado o que simplemente eran imposibles. En ese sentido me refiero a CSS3 el cual ha venido a revolucionar la forma de trabajar de los desarrolladores pudiendo prescindir de ciertas teconologías como Flash o JavaScript en algunas ocasiones. Ojo, no quiero decir que se vaya a dejar de utilizar Flash o JavaScript, sino que ahora se emplean para tareas mucho más puntuales.

En este caso vamos a ver de que manera crear un botón 3D animado utilizando para ello solo CSS3 lo cual anteriormente solo era posible utilizando Flash o imágenes.

Al hacerlo con CSS3 tenemos la ventaja de que el usuario no tendrá que descargar ningún plugin para que el mismo funcione, pero tenemos la desventaja que nuestro usuario deberá contar con un navegador actualizado o de versiones recientes para que pueda funcionarle de manera correcta.

Comenzamos con el elemento más básico para crear esté botón el cual es una simple etiqueta de ancla o enlace:

<a href="#" class="boton boton1">¡Haz click aquí!</a>

En el ejemplo en vivo de esté artículo se utilizará la siguiente manera:

<a href="javascript:void(0)" class="boton boton1">¡Haz click aquí!</a>

Esto con la finalidad de evitar que se recargue la página al dar clic sobre el botón.

Luego debemos crear las reglas CSS que se encargarán de darle el aspecto a nuestro botón:

.boton {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 0 3px;
    position: relative;
    display: inline-block;
    /* Animacion del boton compatible con diferentes navegadores */
    -webkit-transition: all 0.1s; /* Chrome antiguo y Safari */
    -moz-transition: all 0.1s; /* Mozilla antiguo */
    -o-transition: all 0.1s; /* Opera antiguo */
    transition: all 0.1s; /* Regla estandar */
}

Pueden observar en las últimas 4 líneas que se crean reglas similares, ello es para maximizar la compatibilidad con diversos navegadores.

Después creamos la regla que simulará el efecto de hundimiento del botón al pulsarlo con el ratón:

.boton:active {
    -webkit-transform: translateY(7px);
    -moz-transform: translateY(7px);
    -o-transform: translateY(7px);
    transform: translateY(7px);
}

Luego cada botón tendrá un color diferente, en total serán 5 botones con 5 colores diferentes, por lo tanto creamos cada uno de los estilos necesarios para tal fin:

.boton1 {
    background: #BA54D3;
    box-shadow: 0 10px 0 #8E29A7,
                0 11px 5px rgba(0,0,0,0.5);
}
.boton1:active {
    box-shadow: 0 3px 0 #8E29A7,
                0 4px 6px rgba(0,0,0,0.7);
}
.boton2 {
    background: #FF9819;
    box-shadow: 0 10px 0 #CC7000,
                0 11px 5px rgba(0,0,0,0.5);
}
.boton2:active {
    box-shadow: 0 3px 0 #CC7000,
                0 4px 6px rgba(0,0,0,0.7);
}
.boton3 {
    background: #589900;
    box-shadow: 0 10px 0 #3A6600,
                0 11px 5px rgba(0,0,0,0.5);
}
.boton3:active {
    box-shadow: 0 3px 0 #3A6600,
                0 4px 6px rgba(0,0,0,0.7);
}
.boton4 {
    background: #FF1493;
    box-shadow: 0 10px 0 #CC006E,
                0 11px 5px rgba(0,0,0,0.5);
}
.boton4:active {
    box-shadow: 0 3px 0 #CC006E,
                0 4px 6px rgba(0,0,0,0.7);
}
.boton5 {
    background: #1E90FF;
    box-shadow: 0 10px 0 #005AB2,
                0 11px 5px rgba(0,0,0,0.5);
}
.boton5:active {
    box-shadow: 0 3px 0 #005AB2,
                0 4px 6px rgba(0,0,0,0.7);
}

Con eso obtendremos un llamativo botón que tendrá una pequeña animación al momento que hagamos clic sobre el.

Deben tener en cuenta que solo es compatible con Internet Explorer 10+, Chrome 29+ (para versiones anteriores utilizar el prefijo -webkit), Mozilla 24+ (para versiones anteriores utilizar el prefijo -moz), Opera 17+ (para versiones anteriores utilizar prefijo -o), y para Safari se debe utilizar obligatoriamente el prefijo -webkit por los momentos.

Pueden ver la tabla de compatilidad de Transiciones CSS3 con los diferentes navegadores y versiones en el siguiente enlace http://caniuse.com/#search=transition. 

También en la misma página pueden verificar la compatibilidad de CSS3 y HTML5 con diversos navegadores en sus diferentes versiones. Se las recomiendo, este es el enlace http://caniuse.com.

Comentarios

Deja tu comentario

http://