WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Toggle Switch Code Snippet
26
LittlleSquirtle
Open In Editor
Publish Your Code
Recommended
28 February 2025
Dating Website Landing Page HTML CSS
28 August 2025
Music Streaming App HTML Template with Tailwind
29 June 2025
Turkish Blog & Podcast HTML Template
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Switch</title> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> </html>
CSS
Copy
*, ::before, ::after{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; } .switch{ width: 100px; height: 50px; position: relative; display: inline-block; } .switch input{ opacity: 0; width: 0; height: 0; } .slider{ position: absolute; background-color: rgb(200, 190, 198); border-radius: 30px; inset: 0; transition: background 0.3s; cursor: pointer; } .slider::before{ content: ""; position: absolute; width: 40px; height: 40px; top: 5px; left: 5px; background-color: white; border-radius: 50%; transition: left 0.3s ease; } input:checked + .slider{ background-color: rgb(93, 204, 93); } input:checked + .slider::before{ left: 55px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
