Cómo crear un Toggle Switch utilizando CSS

Este tutorial te mostrará cómo crear un botón toggle switch con CSS. En tu proyecto, donde has colocado un checkbox para filtrar el contenido, tendrás que reemplazarlo por un toggle switch. El toggle switch añadirá una experiencia limpia a la funcionalidad por defecto del checkbox. El toggle switch puede ser creado utilizando unicamente CSS, por lo que podrás utilizarlo para tus menesteres en tu proyecto web. Si quieres mejorar la experiencia del usuario en tu sitio web, entonces utiliza un toggle switch en lugar de un checkbox.

En este artículo te proporcionaremos ciertos códigos CSS para crear un toggle switch normal, y para otro con formas redondeadas. Utiliza uno u otro según el estilo que más pegue con tu sitio web.

HTML

Añade el siguiente HTML donde quieras mostrar el checkbox toggle switch.

<label class="switchBtn">
    <input type="checkbox">
    <div class="slide">Filter On</div>
</label>

Estilo para el toggle switch redondeado

<label class="switchBtn">
    <input type="checkbox">
    <div class="slide round">Filter On</div>
</label>

CSS

Añade el siguiente CSS para cambiar tu checkbox normal a un botón toggle switch.

.switchBtn {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 34px;
}
.switchBtn input {display:none;}
.slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 8px;
    color: #fff;
}
.slide:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 78px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slide {
    background-color: #8CE196;
    padding-left: 40px;
}
input:focus + .slide {
    box-shadow: 0 0 1px #01aeed;
}
input:checked + .slide:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    left: -20px;
}

Estilo para el toggle switch redondeado

Añade el siguiente CSS para personalizar tu toggle switch con forma redondeada.

.slide.round {
    border-radius: 34px;
}
.slide.round:before {
    border-radius: 50%;
}

Fuente: codexworld.com