Android L estilo animado UI botón usando JavaScript y CSS3

Vista prévia

Descripción

Con un poco de magia de JavaScript y CSS3, podemos crear un botón de interfaz de usuario de estilo L de Android con una animación de "ondulación" cuando se hace clic o se pulsa. Inspirado en el nuevo < a href = "https://www.google.com/design/spec/material-design/introduction.html" target = "_ blank" rel = "noopener" > diseño de material Concept de Google. Construido por < a href = "https://codepen.io/timkendall/" target = "_ blank" rel = "noopener" > timkendall .

Funcionamiento

Cree el código HTML para un botón de interfaz de usuario.

<div id="button" class="android-btn"></div>

El CSS para el estilo del botón de interfaz de usuario.

.android-btn {

display: inline-block;

font-family: "Roboto";

font-weight: 300;

font-size: 0.9vw;

background: #5677FC;

color: #fff;

height: 36px;

text-align: center;

line-height: 36px;

text-transform: uppercase;

padding: 0 60px;

border-radius: 1px;

position: relative;

top: 0;

left: 0;

overflow: hidden;

cursor: pointer;

transition: all 0.2s ease-in;

-webkit-transition: all 0.2s ease-in;

;
}

.android-btn.active { background: #455EDE; }

.android-btn:after {

content: "Button";

position: absolute;

top: 0;

left: 0;

width: 100%;

text-align: center;
}

.active:before {

content: "";

position: absolute;

top: -32px; /* (button height - height) / 2 */

left: calc(50% - 50px);

width: 100px;

height: 100px;

background-color: #3B50CE;

border-radius: 100%;

-webkit-animation: scaleout 0.3s 1 ease-out;

animation: scaleout 0.3s 1 ease-out;

opacity: 0;
}

Las reglas CSS3 para animar el botón de interfaz de usuario cuando se hace clic en.

@-webkit-keyframes
 scaleout {
0% {
 opacity: 1;
 -webkit-transform: scale(0.0)
}
 50% {
 opacity: 1;
}
 100% {
 -webkit-transform: scale(1.0);
 opacity: 0;
}
}
 @keyframes
 scaleout {
0% {
 opacity: 1;
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
100% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
 opacity: 0;
}
}

El JavaScript para habilitar la animación.

var button = document.getElementById('button'),

button.addEventListener('click', function () {

this.setAttribute('class', 'android-btn active');


var self = this;

setTimeout(function () {


self.removeAttribute('class', 'active');


self.setAttribute('class', 'android-btn');

}, 300)
});