Gerador gratuito de botões CTA
Desenhe um botão de chamada para ação com prévia ao vivo e depois copie HTML e CSS limpos em segundos. Escolha um preset, defina as cores e o efeito de hover e cole direto na sua landing page.
<a href="#" class="cta-button">Get Started</a>Como funciona
Como criar um botão CTA em 3 passos
Desenhe um botão de chamada para ação com a cara da sua marca e copie HTML e CSS limpos e prontos para usar em menos de um minuto. Sem ferramentas de design e sem programar.
- 01
Escolha um preset e escreva o seu texto
Comece por um preset de estilo como Sólido, Gradiente, Contorno ou Pílula e então digite a chamada para ação que quiser, como Começar ou Quero minha oferta.
- 02
Personalize cores, tamanho e hover
Use os controles para definir cores, tamanho, raio dos cantos, sombra e um efeito de hover. A prévia ao vivo se atualiza na hora a cada ajuste.
- 03
Copie o HTML e o CSS
Vá para a aba HTML ou CSS e clique em Copiar código. Cole na sua landing page, site ou template de e-mail e o botão já está no ar.
Por que importa
Por que desenhar o seu botão CTA aqui
O botão de chamada para ação é o elemento mais clicado na maioria das landing pages. Acertando o design, você facilita o sim do visitante, sem tocar em uma linha de código, a não ser que queira.
Veja antes de publicar
Uma prévia ao vivo mostra exatamente o seu botão enquanto você mexe nele, então você sabe com precisão como ele vai ficar na página antes de copiar qualquer linha.
Código limpo, pronto para copiar
O HTML e o CSS gerados são organizados e seguem os padrões. Cole em qualquer site, construtor de páginas ou e-mail e simplesmente funciona.
Presets que já ficam bons de cara
Os presets Sólido, Gradiente, Contorno, Pílula, 3D e Fantasma dão um ponto de partida caprichado em um clique, e você refina a partir dali.
Grátis, privado e sem cadastro
Tudo roda no seu navegador. Sem conta, sem limites e com um design que nunca sai do seu dispositivo, então continua sendo seu.
Casos de uso
Onde os times usam o gerador de botões CTA
De landing pages a campanhas de e-mail, veja como profissionais de marketing e criadores aproveitam um design rápido de botão em tudo o que publicam.
Landing pages
Desenhe a chamada para ação principal de uma landing page para ela se destacar do hero e puxar o visitante para a oferta.
Campanhas de e-mail
Gere HTML com estilos inline para o seu botão aparecer direito nos diferentes clientes de e-mail, sem folha de estilo externa.
Construtores de sites
Jogue o CSS em um bloco de código personalizado no WordPress, Webflow ou qualquer construtor que deixe colar os seus próprios estilos.
Teste A/B de botões
Gere rápido duas ou três variações de botão com cores e textos diferentes e teste qual converte melhor.
Protótipos e mockups
Monte botões realistas para uma demonstração rápida ou um mockup para a diretoria, sem abrir uma ferramenta de design nem começar do zero.
Design systems
Fixe um estilo de botão consistente, copie o CSS uma vez e reutilize a mesma classe em cada página e campanha.
FAQ
Dúvidas sobre o gerador de botões CTA.
O que não estiver aqui está na Central de ajuda, ou pergunte para a gente.
Perguntas frequentes
O que é um gerador de botões CTA?
Um gerador de botões CTA (chamada para ação) é uma ferramenta gratuita que deixa você desenhar um botão visualmente e copiar HTML e CSS prontos para usar. Você ajusta texto, cores, tamanho, raio dos cantos, sombra e efeito ao passar o mouse, e a ferramenta escreve um código limpo que dá para colar direto em qualquer site, landing page ou template de e-mail.
Como eu crio um botão de chamada para ação?
Escolha um preset inicial, como Sólido, Gradiente, Contorno ou Pílula, digite o texto do botão e então ajuste cores, tamanho, raio dos cantos e efeito de hover até a prévia ao vivo ficar do jeito certo. Quando estiver satisfeito, vá para a aba HTML ou CSS e clique em Copiar código. Cole na sua página e o botão já está no ar.
O código de botão gerado é livre para usar?
Sim. O gerador de botões CTA é 100% gratuito, sem cadastro e sem limites. O HTML e o CSS que ele produz são seus para usar em quantos sites, landing pages e campanhas quiser, pessoais ou comerciais.
Preciso saber programar?
Não. Você desenha o botão com controles deslizantes simples e seletores de cor, e a ferramenta escreve o código por você. Se você souber CSS, a saída é limpa e fácil de estender, então dá para jogar no seu arquivo de estilos e continuar mexendo.
O botão vai funcionar no celular?
Sim. O CSS gerado usa propriedades padrão, que renderizam de forma consistente em navegadores e dispositivos modernos. Você também pode ligar a opção de largura total para o botão se esticar em telas menores.
Dá para fazer um botão com gradiente ou 3D?
Sim. O preset Gradiente mistura duas cores da sua escolha para um visual moderno, e o preset 3D dá profundidade com uma sombra em camadas. Cada preset é um ponto de partida que dá para personalizar ainda mais com os controles de cor, tamanho, arredondamento e efeito.
Como adiciono um efeito de hover ao meu botão?
Abra o controle Ao passar o mouse e escolha um efeito: Elevar levanta um pouco o botão, Escurecer intensifica a cor, Brilho adiciona um halo suave e Crescer aumenta um tiquinho. O CSS gerado já inclui a regra :hover correspondente, então o efeito funciona assim que você cola o código na página.
O que faz um botão CTA converter bem?
Botões CTA que convertem bem usam texto orientado à ação (Começar, Quero minha oferta), uma cor que contrasta com força com o fundo, um respiro confortável para ser fácil de tocar e tamanho suficiente para ser o ponto focal claro da seção. Deixe apenas um CTA principal por tela, para a atenção não se dividir.
Dá para compartilhar ou salvar o design do meu botão?
Sim. Clique em Copiar link de compartilhamento e a ferramenta codifica todo o seu design na URL. Quem abrir esse link vê exatamente o mesmo botão, pronto para copiar. Ótimo para mandar um design para alguém do time ou guardar uma versão para depois.
Meu design fica guardado em algum lugar?
Não. Tudo roda inteiramente no seu navegador com JavaScript. O texto do seu botão e os estilos nunca saem do seu dispositivo e nunca são enviados aos nossos servidores.
Coloque o seu novo botão em uma landing page que converte
Um bom botão CTA só funciona em uma página feita para converter. Use o LanderLab para publicar em minutos uma landing page rápida e adaptada a celular e coloque o seu botão onde ele realmente conta.