<section>
	<button><span>button</span></button>
</section>
@import "compass/css3";

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');

*, *:before, *:after{
  box-sizing: border-box;
  margin: 0; padding: 0;
}

section{
  width: 30%;
  margin: 15% auto;
  background: #f2f2f2;
  padding: 5%;
}

button{
  border: 3px solid #222;
  background: transparent;
  overflow: hidden;
  width: 100%;
  outline: none;
  
  span{
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5em;
    color: #222;
    
    display: block; 
    user-select: none;
    position: relative;
    overflow: hidden;
    padding: 20px;
    
    &:hover{cursor: pointer;}
  }
}

.circle{
  display: block; 
  position: absolute;
  background: rgba(0,0,0,.075);
  border-radius: 50%;
  transform: scale(0);
  
  &.animate{animation: effect 0.65s linear;}
}

@keyframes effect{
	100%{
    opacity: 0; 
    transform: scale(2.5);
  }
}








View Compiled
// credit where credit's due; http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

var element, circle, d, x, y;
$("button span").click(function(e){
  
	element = $(this);
  
	if(element.find(".circle").length == 0)
		element.prepend("<span class='circle'></span>");
		
	circle = element.find(".circle");
	circle.removeClass("animate");
	
	if(!circle.height() && !circle.width())
  {
		d = Math.max(element.outerWidth(), element.outerHeight());
		circle.css({height: d, width: d});
	}
	
	x = e.pageX - element.offset().left - circle.width()/2;
	y = e.pageY - element.offset().top - circle.height()/2;
	
	circle.css({top: y+'px', left: x+'px'}).addClass("animate");
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js