Button Ripple Effect
Home
Snippets
Button Ripple Effect
HTML
CSS
JS
<body> <button class="neon-button">Click Me</button> </body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #0d1117; display: flex; justify-content: center; align-items: center; } .neon-button { position: relative; padding: 15px 50px; font-size: 20px; font-weight: bold; color: white; background: transparent; border: 2px solid #0aff9d; border-radius: 30px; cursor: pointer; overflow: hidden; transition: all 0.3s ease-in-out; box-shadow: 0 0 15px #0aff9d, 0 0 30px #0aff9d; } .neon-button:hover { color: #0aff9d; background-color: #00ff9d1a; box-shadow: 0 0 30px #0aff9d, 0 0 60px #0aff9d; } .ripple { position: absolute; border-radius: 50%; background: #00ff9d80; transform: scale(0); animation: rippleEffect 0.6s ease-out; pointer-events: none; } @keyframes rippleEffect { to { transform: scale(4); opacity: 0; } }
const button = document.querySelector('.neon-button'); button.addEventListener('click', function (e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size / 2}px`; ripple.style.top = `${e.clientY - rect.top - size / 2}px`; button.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });
Ad #1
Ad #2
Scroll to Top