<div class="container">
  <div class="row">
    <div class="col-md-4"><button>Click Me!</button></div>
    <div class="col-md-4"><button>Click Me!</button></div>
    <div class="col-md-4"><button>Click Me!</button></div>
  </div>
  <div class="row">
    <div class="col"><button>Click Me!</button></div>
    <div class="col"><button>Click Me!</button></div>
    <div class="col"><button>Click Me!</button></div>
  </div>
</div>

body {
  background-color: #333;
}

button {
  font-family: "Roboto";
  font-size: 24px;
  padding: .5em 1em;
  margin: 3px;
  border: 0;
  outline: 0;
  color: white;
  background-color: #2196f3;
  text-transform: uppercase;
  border-radius: 0.15em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

  overflow: hidden;
  position: relative;
}

button .ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

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

var buttons = document.getElementsByTagName("button");

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

function createRipple(e) {
  var circle = document.createElement("div");
  this.appendChild(circle);

  var d = Math.max(this.clientWidth, this.clientHeight);

  circle.style.width = circle.style.height = d + "px";

  var rect = this.getBoundingClientRect();
  circle.style.left = e.clientX - rect.left - d / 2 + "px";
  circle.style.top = e.clientY - rect.top - d / 2 + "px";

  console.log(this);

  circle.classList.add("ripple");
}