ripple, waves effect, button

gistfile1.txt

.waves-effect {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
  animation: rippleDrop .5s linear;
}
@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}


window.addEventListener('load', function () {
  var buttons = document.querySelectorAll('.waves-effect');
  buttons.forEach( function(element, index) {
    element.addEventListener('click', buttonClick);
  });
  function buttonClick(event) {
    var previous = document.querySelector('.ripple');
    if (previous) previous.remove();
    var button = event.target;
    var posX = button.offsetLeft;
    var posY = button.offsetTop;
    var buttonWidth = button.getBoundingClientRect().width;
    var buttonHeight =  button.getBoundingClientRect().height;
    if(buttonWidth >= buttonHeight) {
      buttonHeight = buttonWidth;
    } else {
      buttonWidth = buttonHeight; 
    }
    var x = event.pageX - posX - buttonWidth / 2;
    var y = event.pageY - posY - buttonHeight / 2;
    var ripple = document.createElement('span');
    ripple.classList.add('ripple');
    button.appendChild(ripple);
    ripple.style.width = buttonWidth + 'px';
    ripple.style.height = buttonHeight + 'px';
    ripple.style.top = y + 'px';
    ripple.style.left = x + 'px';
    ripple.classList.add('rippleEffect');
  }
});