Como usar: Gerador de Botão CSS
- Comece com um preset: sólido, contorno, ghost, pill, gradiente, 3D, glass ou neo-brutalista.
- Altere as cores (ou um gradiente), o tamanho da fonte, o padding, o arredondamento, a borda e a sombra.
- Escolha um efeito de hover e teste todos os estados na pré-visualização — passe o mouse, pressione e use Tab para o anel de foco.
- Copie o CSS e o HTML; renomeie a classe
.btnse quiser.
Todos os estados, acessíveis por padrão
- Hover dá uma resposta visual clara com uma
transitioncurta. - Active (pressionado) move o botão levemente para baixo, para que o clique pareça físico.
- Focus-visible mostra um contorno forte só para usuários de teclado, então o botão continua limpo para quem usa mouse, mas nunca fica invisível para quem navega com Tab.
prefers-reduced-motiondesativa o movimento para visitantes que pedem menos animação.
Verifique o texto contra a cor do botão com o Verificador de Contraste — a WCAG pede pelo menos 4,5:1 para texto normal. Use um <button> real para ações e um <a> para navegação; o CSS funciona nos dois. Relacionados: Gerador de Box Shadow, Gerador de Gradiente CSS, Gerador de Animação Hover CSS.
Também pesquisado como: gerador de botões, estilo de botão css, efeito hover botão css, botão com gradiente css, criar botão css, código de botão css, webflow button style.
Ferramentas que combinam com: Gerador de Botão CSS
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Glassmorphism — Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
Perguntas frequentes
Como faço um efeito hover em botão com CSS?
Adicione uma regra :hover que altere o fundo, a sombra ou a posição, e uma transition no botão para que a mudança seja animada. Escolha um efeito de hover aqui para gerar o código.
Devo remover o contorno de foco dos botões?
Não — usuários de teclado precisam dele. Use :focus-visible, como este gerador faz, assim o anel aparece na navegação por teclado, mas não após cliques com o mouse.
Como faço um botão com gradiente?
Marque Fundo em gradiente e escolha duas cores; o CSS usa linear-gradient como background-image.
Funciona no Webflow?
Sim — cole o CSS em um Embed com uma tag style (ou no código personalizado do seu site) e dê ao botão do Webflow a classe btn, ou copie os valores para o painel Style.
Posso instalar o Gerador de Botão CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Botão CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.