Toggle Swith Button o Botón deslizante
Un toggle switch es un interruptor de dos posiciones, que en las páginas web se simula mediante una especie de círculo que se desplaza entre dos posiciones: encendido apagado.
Este tipo de control se puede crear utilizando solo HTML y estilos CSS. Si quieres que haga alguna acción entonces es más que probable que si necesites Javascript, depende de la acción que quieras que genere
Aunque ya tienes una forma de crearlo aquí tienes otra manera de hacerlo, hay una diferencia muy sutil con la versión anterior: ahora se simula un interruptor deslizante donde el fondo del interruptor también es deslizante para mostrar su color de encendido o apagado, en lugar de un simple cambio de color.
Pero la base sigue siendo la misma: botón tipo checkbox que puede ser detectado por CSS mediante la pseudo clase :checked
El código HTML
Para el ejemplo que ilustre este efecto usamos un código html de lo más simple: un bloque div y dentro un control input tipo checkbox con su correspondiente elemento label.
El bloque es el contenedor y le asignaremos una clase toggleContainer, el input va a quedar invisible con la clase toggle y e labal de este input con la clase switch va a se quien active o desactivo el checkbox (recuerda que va a ser invisible)
<div class="toggleContainer">
<input type="checkbox" id="switch" class="toggle">
<label for="switch" class="switch"></label>
</div>
Estilos CSS
La clave para este tipo de aplicacones está en el botón input que puede estar activado (checked) o desactivado (recuerda que es un checkbox). Esto lo detecta CSS mediante la pseudo clase :checked.
El selector .toggle:checked será el aplicado cuando el input esté seleccionado.
El elemento siguiente a .toggle lo seleccionamos con el signo + es precisamente la etiqueta o label y le asignamos un pseudo elemento ::before para contener el botón que se desplazará al pulsar. Al mismo tiempo que se desplaza cambia el color de fondo del botón.
A estos cambios se les aplica un propiedad transition para que se realicen de forma gradual.
.toggleContainer{
--width: 90px;
--radius: 30px;
position: relative;
width: var(--width);
height: var(--radius);;
background: lightgray;
border-radius: var(--radius);
}
/*toggle es el input check, display:none por Mozilla*/
.toggle{
position: absolute;
width: 0;
height: 0;
display:none;
}
/*swith se ensancha o estrecha al pulsar*/
.toggle + .switch{
position:absolute;
top:0;
left:0;
display: block;
width: var(--radius);
height: var(--radius);
cursor: pointer;
background: red;
border-radius: var(--radius);
transition: width 1s;
}
/*clase del botón que se mueve al pulsar*/
.toggle + .switch:before{
content:"";
position: absolute;
width: var(--radius);
height: var(--radius);
top: 50%;
transform: translateY(-50%);
background: #320c0c;
border-radius: 50%;
margin: 0px 2px;
left: calc(100% - var(--radius));
cursor: pointer
}
.toggle:checked + .switch{
width: var(--width);
}
Con los comentarios debe quedar claro: al pulsar el input check, el botón swtich se ensancha y se va viendo como su color de fondo avanza como si se desplazara, al moverse también lo hace el estremo negro. Mira que este extremo está definido mediante switch:before y se coloca en el extremo de switch. De esta manera parece como si el botón se despaza y deja ver el fondo del color que corresponda a encendido o apagado. Si te gusta compártelo.