Como fazer um toggle switch com CSS puro
296d 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>
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)