<h1>Material Ripple without jQuery</h1>
<p class='op-70'>Because we dont need 82kb for something so simple.</p>
<p>CodePen by <a href='https://codepen.io/TrevorWelch/'>Trevor Welch</a>. Inspired by Craig Tuttle's <a href='https://codepen.io/Craigtut/pen/dIfzv?editors=1010'>pen</a>.</p>

<h2>Classic Ripple</h2>
<div class='stage'>
  <button class='red-button myRipple'>CLICK ME</button>
  <button class='blue-button myRipple'>CLICK ME</button>
  <button class='green-button myRipple'>CLICK ME</button>
  <button class='yellow-button myRipple'>CLICK ME</button>
  <button class='purple-button myRipple'>CLICK ME</button>
</div>

<h2>Custom Ripple Colors</h2>
<div class='stage'>
  
  <button class='custom-button myRipple' ripple-color='#1E88E5'>CLICK ME</button>
  <button class='custom-button myRipple' ripple-color='#43A047'>CLICK ME</button>
  <button class='custom-button myRipple' ripple-color='#FFC107'>CLICK ME</button>
  <button class='custom-button myRipple' ripple-color='#9C27B0'>CLICK ME</button>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

//Some CSS assembly required for effect, but nothing too complex

.ripple{
  position:absolute;
  background:#fff;
  border-radius:50%;
  width:5px;
  height:5px;
  animation:rippleEffect .88s 1;
  opacity:0;
}

@keyframes rippleEffect {
  0% {transform:scale(1); opacity:0.4;}
  100% {transform:scale(100); opacity:0;}
}

.demo-button{
  position:relative; //This is kinda important
  overflow:hidden; //This too
  outline:none;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 2px;
  padding:8px 16px;
  margin:8px;
  font-size:14px;
  font-family:inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition:0.2s;
  &:hover{
    cursor:pointer;
  }
}

.red-button{@extend .demo-button; background:#F44336; &:hover{background:lighten(#F44336,8%);}}
.blue-button{@extend .demo-button; background:#1E88E5; &:hover{background:lighten(#1E88E5,8%);}}
.green-button{@extend .demo-button; background:#43A047; &:hover{background:lighten(#43A047,8%);}}
.yellow-button{@extend .demo-button; background:#FFC107; &:hover{background:lighten(#FFC107,8%);}}
.purple-button{@extend .demo-button; background:#9C27B0; &:hover{background:lighten(#9C27B0,8%);}}

.custom-button{@extend .demo-button; background:none; color:#000; box-shadow:none;}

//Everything after this line is just to pretty up the page

body{
  text-align:center;
  background:#eee;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  box-sizing:border-box;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  h1,h2,h3,p{opacity:0.9;margin:8px 0px;}
  h1{font-weight:300;}
  h2{font-weight:300; margin-top:32px;}
  .op-70{opacity:0.7;}
  a{
    text-decoration:none;
    color:inherit;
    border-bottom:1px solid #1E88E5;
    transition:0.2s;
    &:hover{opacity:0.75; border-bottom-color:lighten(#1E88E5, 10%); }
  }
  .stage{
    margin:16px 0px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    max-width:600px;
  }
}

const rippleElements = document.getElementsByClassName("myRipple");

for(let i = 0; i < rippleElements.length; i++) {
  rippleElements[i].onclick = function(e){
    let X = e.pageX - this.offsetLeft;
    let Y = e.pageY - this.offsetTop;
    let rippleDiv = document.createElement("div");
    rippleDiv.classList.add('ripple');
    rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");
    let customColor = this.getAttribute('ripple-color');
    if (customColor) rippleDiv.style.background = customColor;
    this.appendChild(rippleDiv);
    setTimeout(function(){
      rippleDiv.parentElement.removeChild(rippleDiv);
    }, 900);
  }
}