Волна от клика

<button class="ripple">Кнопка</button>

<style>
.ripple { position: relative; overflow: hidden; }
.ripple .rp { position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.45); translate: -50% -50%;
  pointer-events: none; animation: rp .6s ease-out forwards; }
@keyframes rp {
  from { width: 0; height: 0; opacity: 1; }
  to { width: 280px; height: 280px; opacity: 0; } }
</style>

<script>
document.querySelector(".ripple").addEventListener("click", function (e) {
  var r = this.getBoundingClientRect();
  var sp = document.createElement("span");
  sp.className = "rp";
  sp.style.left = (e.clientX - r.left) + "px";
  sp.style.top = (e.clientY - r.top) + "px";
  this.appendChild(sp);
  sp.addEventListener("animationend", function () { sp.remove(); });
});
</script>

Сделай волну от клика (ripple): кнопке position:relative + overflow:hidden; по клику создаётся span в координатах клика (absolute, translate -50%/-50%, круглый, полупрозрачный белый) и раскрывается от 0 до 280px с затуханием opacity за 0.6s ease-out; удаляется по animationend. Размер волны — примерно 2 диагонали кнопки.