Gerador de toggle switch (botão liga/desliga) CSS

Gerador de toggle switch (botão liga/desliga) CSS: para que serve

O botão liga/desliga é usado em preferências, formulários de cadastro e configurações. Este gerador faz o interruptor com um checkbox de verdade estilizado por CSS, sem JavaScript: guarda o estado, funciona com teclado e toque, vai junto no envio do formulário e é anunciado como ligado ou desligado pelo leitor de tela graças ao role=switch.

Você ajusta largura, altura, cantos e cores e testa o resultado ligado, desligado e desativado. O código inclui o foco visível, a transição suave que respeita quem prefere menos movimento e o modo de alto contraste.

Como usar

1. Ajuste o tamanho e os cantos.
2. Escolha as cores e o texto do rótulo.
3. Copie o HTML e o CSS.

Quando usar

• Preferências de notificação.
• Modo escuro do site.
• Aceite de termos em formulário.

Perguntas frequentes

Por que usar um checkbox?

O checkbox já faz tudo o que um interruptor precisa: guarda o estado, recebe foco, muda com a barra de espaço e é enviado no formulário. O CSS só muda a aparência, e o atributo role=switch faz o leitor de tela anunciar ligado e desligado.

Precisa de JavaScript?

Não para funcionar. Só se você quiser fazer algo na hora em que o botão muda, como salvar a preferência, aí basta ouvir o evento change do input.

Qual tamanho usar no celular?

A área de toque deve ter pelo menos 24 por 24 px pela WCAG 2.2, e o recomendado para o dedo é perto de 44 px. Como o texto ao lado também faz parte do label, ele aumenta a área clicável.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas