EspañolGerador de botão CSS
Comece por um estilo pronto e ajuste cor, tamanho, cantos e sombra. Passe o mouse e clique na prévia para ver os efeitos, depois copie o código.
Botões bonitos em CSS
Disponível em: 
Gerador de botão CSS: para que serve
Escolha um estilo pronto (sólido, pílula, contorno, degradê ou quadrado) e ajuste texto, cores, tamanho da fonte, espaçamento, cantos, sombra, peso da fonte e o efeito ao passar o mouse (subir, escurecer ou aumentar). A prévia funciona de verdade: passe o mouse e clique.
O CSS inclui foco visível para teclado, efeito de hover só em aparelhos com mouse e uma leve redução ao clicar. A ferramenta mostra o contraste entre o texto e o fundo e avisa quando fica abaixo de 4,5:1.
Como usar
- Escolha um estilo pronto.
- Ajuste cores, tamanho, cantos, sombra e efeito.
- Confira o contraste e copie o CSS e o HTML.
Quando usar
- Botões de chamada para ação em landing pages.
- Padronizar os botões de um site.
- Aprender CSS vendo o resultado.
Perguntas frequentes
O botão é acessível?
O código usa a tag button (ou a), mantém o contorno de foco visível com :focus-visible e a ferramenta avisa quando o contraste entre o texto e o fundo fica abaixo de 4,5:1, o mínimo da WCAG para texto normal.
Por que o efeito de hover só aparece no computador?
O hover fica dentro de @media (hover: hover), porque no celular o toque dispara um hover falso que fica preso no botão. O efeito de clique (:active) funciona em todos os aparelhos.
Posso usar o código num link?
Sim. Troque <button> por <a href="..."> e mantenha a classe; o CSS já inclui display:inline-flex e text-decoration:none para os dois casos.
É 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.