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.