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

Как создать эффект волны при клике на кнопку?

Ответ

Навскидку написал скрипт, который анимирует волну от места клика и работает в Safari
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; } }