WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!doctype html> <html lang="en"> <head> <title>CSS Toggle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> </html>
body { background-color: #212121; display: flex; height: 100vh; justify-content: center; align-items: center; overflow: hidden; } .switch { font-size: 17px; position: relative; display: inline-block; width: 3.5em; height: 2em; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; border: 2px solid #414141; border-radius: 50px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .slider:before { position: absolute; content: ""; height: 1.4em; width: 1.4em; left: 0.2em; bottom: 0.2em; background-color: white; border-radius: inherit; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); } .switch input:checked + .slider { box-shadow: 0 0 20px rgba(9, 117, 241, 0.8); border: 2px solid #0974f1; } .switch input:checked + .slider:before { transform: translateX(1.5em); }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!doctype html> <html lang="en"> <head> <title>CSS Toggle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> </html>
body { background-color: #212121; display: flex; height: 100vh; justify-content: center; align-items: center; overflow: hidden; } .switch { font-size: 17px; position: relative; display: inline-block; width: 3.5em; height: 2em; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; border: 2px solid #414141; border-radius: 50px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .slider:before { position: absolute; content: ""; height: 1.4em; width: 1.4em; left: 0.2em; bottom: 0.2em; background-color: white; border-radius: inherit; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); } .switch input:checked + .slider { box-shadow: 0 0 20px rgba(9, 117, 241, 0.8); border: 2px solid #0974f1; } .switch input:checked + .slider:before { transform: translateX(1.5em); }
/* Replace with your JS Code (Leave empty if not needed) */