Pular para o conteúdo

O botão que ninguém clica: 4 decisões que fazem a página vender

Texto, posição, quantidade e altura do botão. As quatro decisões que separam uma página que recebe visita de uma página que recebe clique.

  • Carrossel
  • 23 de out de 2026
  • 3 min de leitura
O botão que ninguém clica: 4 decisões que fazem a página vender
Imagem 2 de 7
Imagem 3 de 7
Imagem 4 de 7
Imagem 5 de 7
Imagem 6 de 7
Imagem 7 de 7
Arraste para o lado

O botão é a única parte da página que pede alguma coisa para quem está lendo. Título, imagem, depoimento e preço preparam o terreno. O botão é onde a decisão acontece. Mesmo assim, é a peça que menos recebe atenção na hora de montar a página: vira um “Saiba mais” colorido no fim de cada seção e pronto.

Neste texto estão as quatro decisões que eu tomo em todo botão antes de publicar uma página. Nenhuma depende de ferramenta. Vale para página feita no Figma, no Framer ou com o Claude Code.

1. O texto do botão é o resultado

“Saiba mais”, “Enviar” e “Clique aqui” descrevem o movimento do mouse, não o que a pessoa ganha. Quem lê precisa imaginar sozinho o que acontece depois do clique, e cada dúvida é um motivo para não clicar.

Troque o verbo genérico pelo resultado. Em vez de “Enviar”, “Quero meu orçamento”. Em vez de “Saiba mais”, “Ver como funciona”. Em vez de “Comprar”, “Garantir minha vaga”. O botão passa a responder a pergunta que a pessoa faz antes de clicar: o que eu levo com isso?

Um teste simples: leia só os botões da sua página, em ordem, sem o resto do texto. Se a sequência não conta o que a página oferece, os botões estão genéricos.

2. Um botão principal por tela

Quando a mesma tela tem três botões do mesmo peso, ninguém sabe qual é o caminho. A pessoa compara, hesita e muitas vezes não escolhe nenhum.

A regra que eu uso: em cada tela existe um botão principal, com a cor de destaque. Os outros caminhos existem, mas aparecem como botão secundário ou como link. O olho encontra o principal em menos de um segundo porque ele é o único com aquela cor.

Grátis

Libere o resto da matéria

Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.

3. Botão e campo na mesma altura

Esse é o detalhe que denuncia página montada sem sistema. O campo de e-mail tem 44 pixels, o botão ao lado tem 52, e os dois ficam desalinhados lado a lado. Ninguém sabe dizer o que está errado, mas todo mundo sente que algo está.

Defina poucas alturas de controle, por exemplo 40 e 48 pixels, e use sempre as mesmas. Tudo que fica lado a lado tem a mesma altura e o mesmo raio. É uma decisão tomada uma vez e repetida no site inteiro.

4. Cor de destaque só no que pede clique

Se a cor da marca está no fundo de seções, em ícones, em títulos e no botão, o botão perde a força. A cor de destaque só chama atenção quando aparece pouco.

Pense em proporção: a maior parte da página é fundo neutro, uma parte menor é superfície, e uma fatia pequena é destaque. Essa fatia pequena vai no botão principal e em quase nada além dele. Quando a pessoa vê a cor, ela já sabe que ali tem uma ação.

O que muda quando você decide antes

As quatro decisões parecem pequenas, e são. A diferença é que elas são tomadas antes de abrir a ferramenta, e não corrigidas depois que a página está pronta. Quando o padrão existe, a IA executa bem: você escreve uma vez que o botão principal é único, tem texto de resultado e usa a cor de destaque, e ela repete isso em todas as telas.

É exatamente esse o método que eu ensino no Conversão Visual: primeiro as decisões de design que fazem uma página vender, depois a execução com Figma e Claude Code. A aula grátis mostra o processo do começo ao fim, com uma página real indo para o ar.

Mais da Biblioteca. Do mesmo tema primeiro.