Como fazer um toggle switch com CSS puro

240d atrás

Nesse tutorial você vai aprender a fazer um toggle button, ou botão de on/off, com #CSS puro.

Primeiro, adicione o seguinte código no seu HTML:

<div class="toggle">
    <input type="checkbox">
</div>

Vamos utilizar apenas uma div com a classe .toggle, que vai servir de container para o nosso switch, e um input checkbox, que servirá para controlar o estado de checado ou não.

Agora, no seu CSS, coloque o código básico de estilização do toggle:

.toggle {
    display: inline-block;
    height: 2rem;
position: relative;
    width: 4rem;
}

Agora adicione o código de estilização para o checkbox:

.toggle input {
    cursor: pointer;
    height: 0;
    width: 0;
}

O próximo passo é estilizar a parte de trás do toggle, para isso vamos estilizar o pseudo-elemento before do checkbox:

.toggle input::before {
    background-color: gray;
    border-radius: 1rem;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: background-color 0.25s ease-in-out;
    width: 100%;
}

E sua estilização quando o input estiver checado:

.toggle input:checked::before {
    background-color: lightblue;
}

Agora, vamos estilizar a parte da frente do toggle, que é o detalhe que vai se mover quando ele estiver checado ou não:

.toggle input::after {
background-color: #ffffff;
    border-radius: 50%;
    content: '';
    height: 1.6rem;
    left: 0.2rem;
    position: absolute;
    top: 0.2rem;
    transition: transform 0.25s ease-in-out;
    width: 1.6rem;
}

Por último, adicione o código para quando o input estiver checado:

.toggle input:checked::after {
    transform: translateX(2rem);
}

Com isso, você vai ter o seguinte resultado:

Comentários (0)