<div class="container">
  <button class="r-btn">Click Me</button>

  <button class="r-btn">Click Me</button>

  <button class="r-btn">Click Me</button>
</div>

body {
  background-color: rgb(40,40,40);
}

div.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
}

button {
  cursor: pointer;
  margin: 10px;
  position: relative;
  overflow: hidden;
  padding: 15px 30px;
  font-size: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  transition: 0.2s;
  &::before {
    content: '';
    height: 3px;
    width: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    background: white;
    transition: 0.4s;
  }
  &:hover {
    &::before {
      width: 100%;
    }
  }
  &:active {
      background-color: rgba(255,255,255,.1);
  }
}

span.ripple {
  background-color: rgba(0,190,255,.7);
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  animation: ripple .5s linear forwards;
}

@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

var buttons = document.querySelectorAll('.r-btn');

Array.prototype.forEach.call(buttons, function (b) {
  b.addEventListener('click', createRipple)
});

function createRipple(event) {
  var ripple = document.createElement('span');
  ripple.classList.add('ripple');
  
  var max = Math.max(this.offsetWidth, this.offsetHeight);
  
  ripple.style.width = ripple.style.height = max*2 + 'px';
  
  var rect = this.getBoundingClientRect();
  
  ripple.style.left = event.clientX - rect.left - max + 'px';
  ripple.style.top = event.clientY - rect.top - max + 'px';
  
  this.appendChild(ripple);
}