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.