WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!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>
*, ::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; }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!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>
*, ::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; }
/* Replace with your JS Code (Leave empty if not needed) */