O Gerador de Botão HTML cria o código de um botão enquanto você ajusta cor, tamanho, borda, fonte, sombra, ícone e efeito de hover. O preview serve de maquete: você vê o prédio inteiro antes de assentar o primeiro tijolo. Os efeitos de hover são feitos em CSS e servem para páginas; em e-mail, muitos programas ignoram esse tipo de efeito. Para e-mail, use o bloco de botão da sua plataforma e aproveite daqui só as cores, o texto e o arredondamento: o código gerado depende de tag de estilo e de fonte externa, que muitos programas descartam.
Como usar o Gerador de Botão HTML
Parta de um preset ou escolha o estilo: sólido, outline, ghost, gradiente ou 3D. Defina tamanho, largura, texto e link, cores, borda, arredondamento, fonte do Google Fonts e sombra, e acrescente um ícone se quiser. Escolha a animação de hover e passe o mouse no preview para testar. O Gerador de Botão HTML mostra o código gerado, pronto para copiar e colar na página.
O que vem no código gerado
O Gerador de Botão HTML entrega um bloco único com três partes: o link da fonte escolhida no Google Fonts, uma tag <style> com a classe custom-button e o elemento <a> com o texto e o endereço de destino. Se você escolheu um ícone, entra antes o link da folha de estilo do Font Awesome, sem o qual o ícone não aparece. Cole o bloco inteiro, na ordem em que ele sai.
O botão é um link, não um elemento de formulário. Ele serve para levar a outra página, e não para enviar dados; para isso, use o botão do próprio construtor de formulários e aproveite daqui só as cores e o arredondamento.
Cuidados ao colar na página
- Todo botão gerado usa a mesma classe. Dois botões diferentes na mesma página se sobrescrevem; renomeie a classe no CSS e no HTML de um deles.
- Sem link preenchido, o destino fica como #, que não leva a lugar nenhum. Troque antes de publicar.
- O código estiliza só o hover; não há regra própria para foco de teclado nem para o clique.
Animações como tremer, pulsar e chacoalhar chamam atenção, mas incomodam quem tem sensibilidade a movimento. Prefira efeitos discretos, como escurecer ou elevar, ou envolva a animação na consulta de mídia prefers-reduced-motion, que permite desligar o efeito para quem configurou o sistema para reduzir movimento.
O que testar antes de trocar o botão do site
Texto, tamanho e posição costumam pesar mais que cor e efeito, mas só um teste A/B confirma o que funciona com o seu público. Um alvo maior e mais perto do cursor também é mais fácil de acertar, princípio conhecido como lei de Fitts. Mude uma coisa por vez, publique a nova versão numa página com tráfego e compare os cliques com os da anterior antes de padronizar o botão no site todo.
Exemplo prático
Imagine uma landing page de inscrição. Escolha o preset, troque o texto para “Baixar o guia”, cole o endereço do arquivo no campo de link e deixe a largura em Auto. Se quiser ocupar a faixa disponível, escolha 100%; se o botão precisar medir 240 px, use a opção fixa.
Como interpretar e revisar o resultado
O preview mostra a aparência, mas não substitui a revisão no contexto real. Confira se o texto deixa claro o destino, se o contraste continua legível sobre o fundo da página e se o endereço colado é o correto. Abra o código e procure o valor de href: é ele que define o destino do link. Como o elemento gerado é <a>, pressionar Enter quando ele recebe foco ativa a navegação, conforme a referência do elemento âncora HTML.
Erros comuns e como evitar
- Copiar só a última linha: o HTML pode aparecer sem fonte ou sem estilo. Copie o bloco inteiro, incluindo o link da fonte e a tag
<style>. - Deixar
#no destino: substitua pelo endereço final e clique no botão gerado para conferir a navegação. - Usar dois botões com a classe
custom-buttone esperar estilos independentes: renomeie a classe de um conjunto no CSS e no elemento<a>. - Testar somente com mouse: adicione uma indicação de foco no seu CSS, por exemplo com
:focus-visible, para quem navega pelo teclado. A MDN descreve esse seletor como uma forma de personalizar o indicador quando ele precisa ficar evidente.
Limites e quando não usar
Use a ferramenta para links de navegação, landing pages, protótipos e chamadas para uma próxima página. Não use o código como substituto de um botão de formulário, de uma ação que envia dados ou de um componente específico de e-mail. O próprio código pode depender de fonte externa, estilo e ícone carregados separadamente; teste o bloco no ambiente onde ele será publicado. Para e-mails, mantenha o botão da plataforma e replique apenas as escolhas visuais que o editor aceitar.
Antes de publicar, faça três verificações: destino real no link, leitura no celular e navegação por teclado. Se houver animação, teste também a preferência de movimento reduzido do sistema. A consulta prefers-reduced-motion: reduce permite substituir ou reduzir animações quando essa preferência está ativa, segundo a documentação da MDN. Depois dessas conferências, copie o código completo e cole-o no bloco HTML do seu site.