Стилизация “волны” в кнопке при клике

var links = document.querySelectorAll("button"); 
for(var i = 0; i < links.length; i++){ 
links[i].addEventListener('click', function (event) { 
    event.preventDefault(); 
 
    // Remove any old one 
    var ripple = document.querySelector('.ripple'); 
    if (ripple) { 
        ripple.remove(); 
    } 
 
    // Setup 
    var buttonWidth = this.offsetWidth, 
        buttonHeight = this.offsetHeight; 
 
    // Make it round! 
    if(buttonWidth >= buttonHeight) { 
        buttonHeight = buttonWidth; 
    } else { 
        buttonWidth = buttonHeight; 
    } 
 
    // Get the center of the element 
    var x = event.offsetX==undefined?event.layerX:event.offsetX - buttonWidth / 2, 
        y = event.offsetY==undefined?event.layerY:event.offsetY - buttonHeight / 2; 
 
    // Add the element 
    var span = document.createElement('span'); 
    span.className = 'ripple'; 
    s = span.style; 
    s.width = buttonWidth + 'px'; 
    s.height = buttonHeight + 'px'; 
    s.top = y + 'px'; 
    s.left = x + 'px'; 
    this.appendChild(span); 
}); 
}

button { 
  display: block; 
  color: #fff; 
  background: #232323; 
  padding: 0 50px; 
  position: relative; 
  overflow: hidden; 
  font: 700 18px/46px 'Arial'; 
  border: none; 
  outline: none; 
  user-select: none; 
  cursor: pointer; 
  transition: background .25s; 
} 
button:hover, 
button.active { 
  background: #444; 
} 
.ripple { 
  width: 0; 
  height: 0; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.4); 
  transform: scale(0); 
  position: absolute; 
  opacity: 1; 
  animation: ripple 0.5s linear; 
} 
@keyframes ripple { 
  100% { 
   transform: scale(2); 
   opacity: 0; 
  } 
}

   <button>Кнопка</button>

button{ 
  position: relative; 
  overflow: hidden; 
      border: none; 
    cursor: pointer; 
    color: white; 
    padding: 15px 40px; 
    border-radius: 2px; 
    font-size: 22px; 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
    background: #167dad; 
} 
 
button:after { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 5px; 
  height: 5px; 
  background: rgba(255, 255, 255, .5); 
  opacity: 0; 
  border-radius: 100%; 
  transform: scale(1, 1) translate(-50%); 
  transform-origin: 50% 50%; 
} 
 
@keyframes ripple { 
  0% { 
    transform: scale(0, 0); 
    opacity: 1; 
  } 
  20% { 
    transform: scale(25, 25); 
    opacity: 1; 
  } 
  100% { 
    opacity: 0; 
    transform: scale(40, 40); 
  } 
} 
 
button:focus:not(:active)::after { 
  animation: ripple 1s ease-out; 
}

<button>Кнопка</button>