Gerador de Botão Toggle CSS
Gere um botão toggle CSS puro — uma verdadeira caixa de seleção estilizada com :checked, sem JavaScript. Defina tamanho, cores, raio de borda e velocidade da animação, escolha um nome de classe com escopo e copie o HTML + CSS acessível.
Entrada
Estilo
Limitado à metade da altura — deixe alto para um pílula, reduza para 0 para um botão quadrado.
Cores
Ignorado pelo estilo esboçado, onde o botão assume a cor ligada/desligada em si.
Comportamento e marcação
Desabilitado automaticamente para visitantes que preferem movimento reduzido.
As regras geradas são limitadas a esta classe, para que não colidam com seus próprios estilos.
Deixe em branco para um botão sem rótulo visível.
Saída
Seu botão toggle aparecerá aqui.
O componente gerado real, isolado em um Shadow DOM — clique para ver a animação.
Seu botão toggle aparecerá aqui.
Cópia com estilos inline dos dois estados acima — útil para simulação. Não interativo.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-switch-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "track",
"width": "56",
"height": "32",
"borderRadius": "40",
"offColor": "#cbd5e1",
"onColor": "#22c55e",
"knobColor": "#ffffff",
"transition": "250",
"knobShadow": "true",
"className": "io-switch",
"labelText": "Enable notifications"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-switch-generator` tool (CSS Toggle Switch Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-switch-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Botão Toggle CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
O Gerador de Botão Toggle CSS cria um botão toggle no estilo iOS a partir de um verdadeiro <input type="checkbox"> e apenas CSS. Defina o tamanho, cores, raio de canto e velocidade de animação, e você obtém o HTML, a folha de estilo e uma visualização ao vivo de ambos os estados desligado e ligado.
Não há JavaScript na saída. O botão é alternado por causa do seletor sibling :checked, o que significa que funciona com o teclado, envia com um formulário e degenera para uma caixa de seleção simples em qualquer coisa que não possa estilos.
Como usar
- Escolha um Estilo do Botão — veja abaixo para o que cada um muda.
- Defina Largura, Altura e Raio da Borda. Deixe o raio alto para uma pílula, reduza para 0 para um botão quadrado.
- Escolha as cores Desligada, Ligada e Botão.
- Defina a duração da Animação, alterne a sombra do botão e dê um Nome da Classe.
- Copie o HTML em sua marcação e o CSS em sua folha de estilo.
Os três estilos
- Trilho — o botão fica dentro da trilha, recuado por um oitavo da altura. Este é o clássico botão iOS.
- Fino — a trilha é uma barra fina e o botão é mais alto, sobressaindo acima e abaixo. Esta é a forma do Material Design.
- Esboçado — a trilha é transparente com uma borda colorida, e o botão assume a cor ligada/desligada em si. Bom para UIs mínimas ou modo escuro.
Tudo o mais — dimensionamento, cores, raio, tempo — se aplica aos três, portanto qualquer um deles pode ser aproximado de seu padrão.
O botão gerado é acessível?
Sim, e é aqui que um botão gerado geralmente falha. A saída mantém uma verdadeira caixa de seleção focável (visualmente oculta, nunca display: none, que a removeria da ordem de tabulação), adiciona role="switch", desenha um contorno :focus-visible para que usuários de teclado possam ver onde estão, estiliza um estado :disabled e envolve a animação em um bloco prefers-reduced-motion: reduce que desativa a transição para visitantes que solicitam menos movimento.
O CSS entrará em conflito com meus estilos existentes?
Cada seletor é limitado ao nome da classe que você escolhe, usando nomenclatura estilo BEM __input / __track / __label. Nada visa um elemento nú, portanto colar em uma folha de estilo existente não atingirá mais nada. Se io-switch já foi usado, digite um nome diferente e todo o bloco é renomeado.
Por que a visualização é estática?
A visualização renderiza ambos os estados lado a lado com estilos inline para que você possa compará-los rapidamente. Uma verdadeira regra :checked e um pseudo-elemento ::before não podem estar em um atributo style inline — a versão interativa é o HTML + CSS que você copia.
E se precisar de algo além de um botão?
Para uma caixa de seleção ou rádio simples estilizado, o Gerador de Caixa de Seleção HTML produz a marcação. Para refinar a forma, use o Gerador de Raio de Borda CSS, e para a sombra de queda do botão o Gerador de Sombra de Caixa CSS oferece muito mais controle. Escolher cores ligadas/desligadas que se leiam bem juntas é mais fácil com o Mixer de Cores.