Gerador de Botões CSS
Um gerador de botões CSS transforma definições visuais numa regra pronta a colar. Um botão só precisa de background-color, color, padding e border-radius; a borda é opcional e o padding escreve-se primeiro vertical e depois horizontal. Exemplo: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff dá um botão azul arredondado cujo rótulo passa o nível AA das WCAG com 5,17:1.
Pré-visualização
Verificação de acessibilidade
Personalizar
Modelos Rápidos
Código Gerado
Ferramentas populares
Sobre Gerador de Botões CSS
O Gerador de Botões CSS transforma um punhado de controlos e seletores de cor na única regra CSS de que um botão realmente precisa. Define o rótulo, as cores de fundo e de texto, o tamanho e a espessura da letra, o espaçamento horizontal e vertical, o raio dos cantos, a espessura e a cor da borda e uma de quatro profundidades de sombra; uma segunda cor opcional transforma o preenchimento liso num gradiente linear de 135 graus. A pré-visualização fica acima dos controlos e é um botão HTML verdadeiro com os seus valores, no tamanho com que será desenhado na sua página, por isso o que aprova é o que publica.
Duas coisas tornam a saída utilizável em vez de decorativa. Primeiro, o painel de código tem dois separadores: uma classe .btn reutilizável com regras :hover, :active, :focus-visible e :disabled para colocar numa folha de estilos, e o mesmo elemento button com tudo em linha num atributo style para construtores de páginas, blocos de CMS e modelos de e-mail que removem o CSS externo. Segundo, o painel de acessibilidade mede o par de cores segundo as WCAG 2.2 e indica o rácio de contraste com um veredito AAA, AA ou de falha, passando para os limiares de texto grande quando o tamanho e a espessura o justificam.
Indica ainda a altura apresentada - duas vezes o espaçamento vertical, mais duas vezes a borda, mais 1,2 vezes o tamanho da letra, a entrelinha que a regra fixa para que o botão no ecrã tenha exatamente a altura anunciada - face aos alvos de 24 x 24 e 44 x 44 pixels CSS dos critérios 2.5.8 e 2.5.5.
Um gradiente é verificado contra as suas duas paragens e é mostrado o pior dos dois rácios. Os oito modelos - Primário, Perigo, Sucesso, Contorno, Pílula, Gradiente, Discreto e Néon - são pontos de partida e não um destino: clique num e continue a afinar. Nenhuma cor, rótulo ou posição de controlo é enviada para lado nenhum; o cálculo do contraste, a pré-visualização e o código são feitos na própria página, e é por isso que o rácio se atualiza na mesma tecla que redesenha o botão. O que copia é uma única classe sem framework para instalar, sem passo de compilação e sem script em execução.
Casos de uso
Como usar
Digite em Texto do Botão o texto que deve aparecer nele e defina as cores de Fundo e do texto nas amostras ou digitando os códigos hexadecimais ao lado.
Arraste os controles de tamanho da fonte, espaçamento horizontal, espaçamento vertical e Raio da Borda para moldar o botão e aumente a Espessura da Borda com uma Cor de Borda para um visual contornado.
Escolha um Peso da fonte entre Normal, Médio, Semi-negrito ou Negrito e uma Sombra entre Nenhum, Pequena, Média ou Grande.
Marque Gradiente e escolha a segunda cor para transformar o fundo em um gradiente diagonal de duas cores.
Clique em um cartão de Modelos Rápidos, como Primário, Contorno, Pílula, Gradiente, Discreto ou Néon, para carregar um estilo pronto que você ainda pode ajustar.
Confira o botão ao vivo no painel de Pré-visualização, mude a aba de saída para CSS ou HTML + CSS e clique no ícone de copiar na caixa de código.
Dicas Pro
- Defina o tamanho da letra antes de tudo o resto. O espaçamento e o raio são muito mais fáceis de avaliar com o rótulo já no tamanho final, e a leitura da altura (2 x espaçamento vertical + 2 x espessura da borda + 1,2 x tamanho da letra) acompanha-o.
- Carregue um modelo e depois ajuste. Contorno e Discreto já partem de uma espessura de borda acima de zero, que é o caminho mais rápido para um botão secundário.
- Escreva os códigos hexadecimais no campo ao lado de cada amostra em vez de procurar dentro do seletor de cor; a pré-visualização e o rácio de contraste atualizam-se a cada tecla.
- O nível AA aplica-se a qualquer tamanho de texto; só o limiar muda: 4,5:1 para texto normal e 3:1 quando o rótulo chega a 24px, ou a 18,66px em negrito. Um par a 3:1 pode parecer aceitável num monitor brilhante e ser ilegível ao ar livre, por isso trate o limiar mais baixo como um teto, não como um alvo.
- Os gradientes são verificados contra as duas paragens e é indicado o pior rácio, por isso, se só uma ponta falha, mova essa paragem em vez de recolorir o botão inteiro.
Solução de problemas
O CSS copiado não tem qualquer efeito visível na minha página.
A classe está a ser sobreposta, ou nunca foi aplicada. Confirme que o elemento tem class="btn", carregue a sua folha de estilos depois do CSS do framework e abra o painel Estilos nas ferramentas de programação: uma declaração riscada significa que outro seletor ganha por especificidade ou por ordem.
O gradiente parece liso ou não aparece de todo.
Um gradiente é uma imagem de fundo, não uma cor de fundo. Marque Gradiente para que a ferramenta emita background: linear-gradient(...) em vez de background-color. Se mesmo assim não aparecer, procure uma propriedade abreviada background ou um background-image declarados mais à frente no mesmo elemento: a abreviada repõe background-image em none e apaga o gradiente. Um background-color posterior não o consegue tapar, porque o CSS Backgrounds 3 pinta a cor por baixo das imagens de fundo.
O distintivo de contraste diz que as cores falham, mas o botão parece-me legível.
O contraste mede-se pela luminância relativa, não pela vivacidade aparente de uma cor. Pares de meio-tom como #f59e0b com texto branco ficam perto de 2:1 apesar de parecerem vivos. Escureça o fundo ou passe o rótulo a quase preto; o rácio atualiza-se enquanto escreve.
Perguntas frequentes
Escreva uma única regra para a classe e defina seis declarações: background-color, color, font-size, font-weight, padding e border-radius. Acrescente box-shadow e uma borda apenas quando o desenho o exigir. O gerador escreve exatamente essa regra por si: arraste os controlos, veja a pré-visualização ao vivo e copie o bloco .btn do separador CSS para a sua folha de estilos.
O separador CSS dá uma classe .btn reutilizável com as suas regras de estado para colar numa folha de estilos, de modo que todos os botões do site mudam quando edita esse bloco. O separador HTML + CSS dá um único elemento button com as mesmas declarações em linha num atributo style, que é o que precisam os construtores de páginas, os blocos de CMS e os modelos de e-mail, porque removem folhas de estilo externas. Converta-o numa ligação com href quando o clique navega.
Suba o controlo Raio da borda. Perto de 8px obtém o retângulo suavizado que a maioria das interfaces usa, e acima de metade da altura do botão os cantos fundem-se numa pílula. Com a letra predefinida de 16px e 12px de espaçamento vertical o botão tem 43px, por isso qualquer raio acima de cerca de 22 já parece totalmente arredondado, e 999px em CSS escrito à mão significa o mesmo.
Sim. Sempre que muda a cor do texto ou do fundo, recalcula o rácio de contraste WCAG e mostra AAA, AA ou uma falha. Texto normal precisa de 4,5:1 para AA e 7:1 para AAA; texto de 24px, ou de 18,66px a negrito, conta como grande e precisa apenas de 3:1 e 4,5:1. Os gradientes são medidos contra as duas paragens de cor.
O painel de tamanho indica a altura apresentada como duas vezes o espaçamento vertical, mais duas vezes a espessura da borda, mais 1,2 vezes o tamanho da letra - a entrelinha que o gerador fixa na regra, para que o número corresponda ao botão desenhado por cima. O critério 2.5.8 das WCAG 2.2 pede um alvo de 24 x 24 pixels CSS e o 2.5.5 eleva-o para 44 x 44. A letra de 16px com 12px de espaçamento vertical dá 43px, bem acima do mínimo.
Use button quando o clique atua na página atual: submeter um formulário, abrir um diálogo, executar JavaScript. É focável por omissão, dispara com Enter e Espaço e suporta o atributo disabled. Use uma ligação com href quando o clique leva a outra URL, para que o clique do meio e «abrir num separador novo» continuem a funcionar. Ambos podem levar a mesma classe .btn.
O CSS gerado já traz .btn:hover e .btn:active. Deixe marcada a caixa «Incluir os estados focus e disabled no código» e obtém também .btn:focus-visible com um contorno de 3px afastado 2px, e .btn:disabled a meia opacidade com cursor: not-allowed. Nunca apague um contorno de foco sem o substituir por algo visível, ou quem navega por teclado perde qualquer noção de onde está.
Sim. A saída é CSS simples, sem licença, sem obrigação de atribuição e sem dependências em execução, e o comentário de crédito na primeira linha pode ser apagado. Nada do que escreve é enviado: a pré-visualização, o código gerado e o cálculo do contraste são feitos em JavaScript dentro desta página, por isso as suas cores e rótulos nunca chegam a um servidor.
Os estilos herdados são quase sempre a causa. Um reset de framework, uma font-family do elemento pai, uma regra global de button ou um seletor de maior especificidade podem sobrepor-se à classe colada. Carregue a sua folha de estilos depois do CSS do framework, mantenha .btn num único elemento e leia o painel Estilos nas ferramentas de programação: uma declaração riscada diz-lhe exatamente que seletor ganhou.