Neon Glow Counter - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Glow Counter</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; font-family: 'Arial', sans-serif; margin: 0; } .counter-container { text-align: center; background: #111; padding: 20px; border-radius: 10px; box-shadow: 0 0 20px #0ff; position: relative; } .counter { font-size: 100px; color: #0ff; margin: 0; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; } .label { font-size: 20px; color: #0ff; margin-top: 10px; letter-spacing: 1.5px; } .increment-btn { background: #0ff; color: #000; border: none; padding: 10px 20px; font-size: 20px; border-radius: 5px; cursor: pointer; margin-top: 20px; transition: background 0.3s; } .increment-btn:hover { background: #00f; } </style> </head> <body> <div class="counter-container"> <div class="counter" id="counter">0</div> <div class="label">Visitors</div> <button class="increment-btn" onclick="incrementCounter()">Increment</button> </div> <script> let count = 0; const counterElement = document.getElementById('counter'); function incrementCounter() { count++; counterElement.textContent = count; counterElement.classList.add('neon-flash'); setTimeout(() => counterElement.classList.remove('neon-flash'), 500); } counterElement.addEventListener('animationend', () => { counterElement.classList.remove('neon-flash'); }); </script> </body> </html>