A Pen by Craig Tuttle.

index.html

<h1>Material Design Buttons</h1>
<h3>Just add the class ripple to anything and use the "data-ripple-color" property to set the ripple color</h3>

<button class="ripple">Login</button>
<button class="ripple" data-ripple-color="#89669b" style="background:white; color:black;">Login</button>

Material-Design-Ripple.markdown

Material Design Ripple

Some code forked from http://codepen.io/boriskaiser/pen/Gwtsz

A Pen by Craig Tuttle on CodePen.

License.

script.js

(function (window, $) {
  
  $(function() {
    
    
    $('.ripple').on('click', function (event) {
      event.preventDefault();
      
      var $div = $('<div/>'),
          btnOffset = $(this).offset(),
      		xPos = event.pageX - btnOffset.left,
      		yPos = event.pageY - btnOffset.top;
      

      
      $div.addClass('ripple-effect');
      var $ripple = $(".ripple-effect");
      
      $ripple.css("height", $(this).height());
      $ripple.css("width", $(this).height());
      $div
        .css({
          top: yPos - ($ripple.height()/2),
          left: xPos - ($ripple.width()/2),
          background: $(this).data("ripple-color")
        }) 
        .appendTo($(this));

      window.setTimeout(function(){
        $div.remove();
      }, 2000);
    });
    
  });
  
})(window, jQuery);

style.css

body{
  text-align: center; 
}



button{
  position: relative;
  border: none;
  outline:none;
  cursor: pointer;
  background: #89669b;
  color: white;
  padding: 18px 60px;
  border-radius: 2px;
  font-size: 22px;
}

.fab{
  border-radius: 50%;
  margin:0;
  padding: 20px;
}

.material{
  position:relative;
  color:white;
  margin: 20px auto;
  height:400px;
  width:500px;
  background:#f45673;
  
}

.ripple{
  overflow:hidden;
}

.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;

    
  animation: ripple-animation 2s;
}


@keyframes ripple-animation {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(100);
      opacity: 0;
    }
}