/*CSS*/ span.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple 600ms linear; background-color: rgba(255, 255, 255, 0.7); } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /*JS*/ function createRipple(event) { const button = event.currentTarget; const btnRect = button.getBoundingClientRect(); const circle = document.createElement("span"); const diameter = Math.max(btnRect.width, btnRect.height); const radius = diameter / 2; circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${event.clientX - (btnRect.left + radius)}px`; circle.style.top = `${event.clientY - (btnRect.top + radius)}px`; circle.classList.add("ripple"); const ripple = button.getElementsByClassName("ripple")[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); } const buttons = document.getElementsByClassName("ct-link-button"); for (const button of buttons) { button.addEventListener("click", createRipple); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter