Crear un boton al estilo material design (Material Buttons)

· 2 min de lectura
Crear un boton al estilo material design (Material Buttons)

Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.

Material Design

Recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.

Precisamente este diseño basado en objetos es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Material Design quiere guiarse por las leyes de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no puedan atravesarse el uno al otro.

En este pequeño tutorial realizare un botón con los efectos de ondas material design, utilizando css y javaScript

Lo primero agregamos nuestro botón en nuestro html y agregamos la clase waves

 <button class="btn btn-large waves">Button</button>

Declaramos nuestros respectivos estilos para la clase waves

/* Caja del botón */
.waves {
  position: relative;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* Caja de las ondas*/
.waves-ripple {
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* Animación para la caja de las ondas*/
.waves-animate {
  -webkit-animation: waves_ripple-animate 0.5s linear;
          animation: waves_ripple-animate 0.5s linear;
}

@-webkit-keyframes waves_ripple-animate {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes waves_ripple-animate {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

Ya te tenemos nuestro botón con su clase respectiva. Ahora nos toca realizar maravillas con javaScript estoy utilizando la libreria jQuery

(function(){

    /*Declaramos variables Globales*/    
    var waves_ripple, d, x, y;
    
    $('.waves').on('click', wavesRipple);
    
    function wavesRipple(e){
        e.preventDefault();
        var that = $(this);
        
        /* Si no existe nuestra caja hijo se lo agregamos */
        if ( that.find('.waves-ripple').length === 0 ){
            that.prepend( '<span class="waves-ripple"></span>' );
        }
        
        waves_ripple = that.find('.waves-ripple');
        waves_ripple.removeClass('waves-animate');
        
        if ( !waves_ripple.height() && !waves_ripple.width() ){

            /* Optemos el tamaño maximo de uno de los lados de la caja padre */
            d = Math.max(that.outerWidth(), that.outerHeight());
            
            /* Agregamos el tamaño optenido a nuestra etiqueta hijo */
            waves_ripple.css({
                height: d,
                width: d
            });
        }
        
        /* Obtener posiciones donde se dio click */
        x = e.pageX - that.offset().left - waves_ripple.width() / 2;
        y = e.pageY - that.offset().top - waves_ripple.height() / 2;
        
        /* Las posiciones optenidas se lo agregamos a nustra caja hijo */
        waves_ripple
            .css({
                top: y + 'px',
                left: x + 'px'
            })
            .addClass('waves-animate');
        
    }
    
})();


Aquí tienes la demostración de como funciona. El código es editable y puedes usar en tus proyectos. Si tienes dudas solo deja un comentario para poder ayudarte XD.

See the Pen Material Buttons by GodoFredo (@GodoFredoNinja) on CodePen.

Artículos Relacionados

Cómo utilizar window.confirm()
· 1 min de lectura
Como elegir una clave SSH para un host especifico
· 1 min de lectura
SVG generadores de patrones
· 1 min de lectura
Convertir una cadena en un array en JavaScript
· 2 min de lectura
Video responsive de YouTube y Vimeo con HTML y CSS
· 1 min de lectura