Neon Switch - MeggiTools
Run
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 Switch</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; font-family: 'Arial', sans-serif; } .toggle-container { position: relative; width: 120px; height: 60px; } .toggle-switch { position: absolute; cursor: pointer; width: 100%; height: 100%; background: #111; border-radius: 50px; transition: background 0.3s; } .toggle-switch::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 25px; transition: left 0.3s, transform 0.3s; } .toggle-switch::after { content: ''; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 25px; transition: right 0.3s, transform 0.3s; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-switch input[type="checkbox"]:checked + .toggle-slider { background: #39ff14; } .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before { left: calc(100% - 55px); } .toggle-slider { position: absolute; width: 100%; height: 100%; background: #333; border-radius: 50px; transition: background 0.3s; } .toggle-slider::before { content: ''; position: absolute; width: 50px; height: 50px; top: 5px; left: 5px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: left 0.3s; } .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before { left: calc(100% - 55px); } .toggle-slider::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; box-shadow: 0 0 20px #39ff14; opacity: 0; transition: opacity 0.3s; } .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after { opacity: 1; } </style> </head> <body> <div class="toggle-container"> <label class="toggle-switch"> <input type="checkbox" id="toggle-neon"> <div class="toggle-slider"></div> </label> </div> <script> document.querySelector('#toggle-neon').addEventListener('change', function () { if (this.checked) { alert('Neon Switch is ON'); } else { alert('Neon Switch is OFF'); } }); </script> </body> </html>