Botón 3D animado creado con CSS3

Botón 3D animado creado con CSS3
  • Eborio Linárez
  • December 30, 2013
  • 0

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 conseguir resultados que simplemente eran imposibles. En este sentido me refiero a CSS3 el cual ha venido a revolucionar la forma de trabajar de los frontenders pudiendo prescindir de ciertas tecnologí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 el usuario deberá contar con un navegador actualizado o de versiones recientes para que pueda funcionar el botón de manera correcta.

Veamos el ejemplo en vivo para tener la idea del objetivo que vamos a conseguir.

See the Pen Botón 3D animado creado con CSS3 by Eborio Linárez (@eborio) on CodePen.

Comenzamos con el elemento más básico para crear este botón: un enlace o botón común.

<a href="#" class="button button-purple">¡Haz click aquí!</a>

Luego creamos el aspecto básico del botón.

.button {
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
    text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.2);
    text-decoration: none !important;
    text-transform: uppercase;
    color: #fff !important;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 0 3px;
    position: relative;
    display: inline-block;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

La regla más importante es la transición transition debido a que le brindará la animación deseada al botón al momento de hacer clic sobre él.

Ahora definimos la regla que le dará el movimiento al botón en el estado :active.

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

La regla es muy sencilla. Desplazamos 7px hacia abajo el botón gracias a la propiedad transform.

Las siguientes reglas completan el estilo del botón. El ejemplo en vivo solo posee 3 botones, pero el ejemplo descargable posee 5 botones con diferentes colores.

.button-purple {
    background: #ba54d3;
    box-shadow: 0 10px 0 #8e29a7,
                0 11px 5px hsla(0, 0%, 0%, 0.5);
}
.button-purple:active {
    box-shadow: 0 3px 0 #8e29a7,
                0 4px 6px hsla(0, 0%, 0%, 0.7);
}
.button-orange {
    background: #ff9819;
    box-shadow: 0 10px 0 #cc7000,
                0 11px 5px hsla(0, 0%, 0%, 0.5);
}
.button-orange:active {
    box-shadow: 0 3px 0 #cc7000,
                0 4px 6px hsla(0, 0%, 0%, 0.7);
}
.button-green {
    background: #589900;
    box-shadow: 0 10px 0 #3a6600,
                0 11px 5px hsla(0, 0%, 0%, 0.5);
}
.button-green:active {
    box-shadow: 0 3px 0 #3a6600,
                0 4px 6px hsla(0, 0%, 0%, 0.7);
}
.button-pink {
    background: #FF1493;
    box-shadow: 0 10px 0 #cc006e,
                0 11px 5px hsla(0, 0%, 0%, 0.5);
}
.button-pink:active {
    box-shadow: 0 3px 0 #cc006e,
                0 4px 6px hsla(0, 0%, 0%, 0.7);
}
.button-blue {
    background: #1E90FF;
    box-shadow: 0 10px 0 #005ab2,
                0 11px 5px hsla(0, 0%, 0%, 0.5);
}
.button-blue:active {
    box-shadow: 0 3px 0 #005ab2,
                0 4px 6px hsla(0, 0%, 0%, 0.7);
}

A cada botón se le aplican colores diferentes es su estado por defecto, además de dos sombras en conjunto. La primera posee un color similar al del botón y la segunda es de un color gris transparente.

De igual forma en el estado :active se disminuye el tamaño de cada sombra 7px para hacerlo coincidir con el desplazamiento del botón establecido anteriormente.

Y con esto llegamos al final, como siempre espero te haya gustado el post y lo compartas en tus redes sociales.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario