js

            var ripple = $("<div class='ripple'>");
            var offsetX = e.pageX - $(this).offset().left;
            var offsetY = e.pageY - $(this).offset().top;
            var size = .8 * ($(this).width() > $(this).height() ? $(this).width() : $(this).height());
            ripple.css({left:offsetX, top:offsetY, height:size, width:size});
            ripple.one("webkitAnimationEnd oanimationend msAnimationEnd animationend",function(){$(this).remove()});
            $(this).prepend(ripple);

keyframes

@include keyframes(ripple) {
  0% {
    @include transform(translateX(-50%) translateY(-50%) scale(1));
  }
  80% {
    @include transform(translateX(-50%) translateY(-50%) scale(3));
  }
  100% {
    @include transform(translateX(-50%) translateY(-50%) scale(3));
    opacity: 0;
  }
}

Ripple animation css

.has-ripple {
  position: relative;
  overflow: hidden;
  @include transition(.4s all);
}
.ripple {
  background: #FFF;
  position: absolute;
  -webkit-animation: ripple 1s cubic-bezier(0.23, 1, 0.32, 1);
          animation: ripple 1s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
  z-index: 3;
}