O botão do e-mail não é clicável: por quê e como consertar
Seis sintomas e um código que funciona em todos os clientes
Mailvex · 31 agosto 2026 · 4 min de leitura
O botão parece um botão, mas só o rótulo é clicável, e o Outlook tira o fundo e os cantos arredondados. A causa é que os clientes de e-mail leem espaçamentos e fundo de formas diferentes, e o Outlook clássico usa direto o motor de um editor de texto. A solução é montar o botão sobre uma tabela e adicionar código à parte para o Outlook.
Por que os botões quebram justo no e-mail
Num site um botão se faz em uma linha: o link recebe fundo, espaçamentos e cantos arredondados. No e-mail esse método funciona só em alguns clientes.
O Outlook clássico para Windows ignora os espaçamentos do link e não entende cantos arredondados. O resultado: um retângulo colorido onde só o texto é clicável, e sem margem em volta.
O problema não é cosmético. A pessoa mira no botão, acerta no espaçamento, nada acontece, e fecha o e-mail achando que o link está quebrado.
Seis sintomas e suas causas
Seis sintomas cobrem quase todos os casos. Encontre o seu e veja a causa.
| Sintoma | Causa | Solução |
|---|---|---|
| Só o texto é clicável | os espaçamentos estão na célula e não no link | mova os espaçamentos para o próprio link |
| Sem fundo no Outlook | o fundo está em um bloco que o Outlook ignora | fundo na célula da tabela mais código VML |
| Os cantos arredondados sumiram | o Outlook não os suporta | código VML com o raio, código normal para o resto |
| O botão ocupou toda a largura | o link virou bloco sem limite | defina a largura na tabela, não no link |
| O link não abre | endereço relativo ou erro de digitação | endereço https completo, teste o clique |
| O botão se deslocou no celular | largura fixa maior que a tela | largura em porcentagem, altura mínima de 48 pixels |
A primeira linha acontece mais que todas as outras juntas.
Código pronto de um botão confiável
Um botão confiável é montado com duas partes: código VML para o Outlook e uma tabela normal para o resto. Cada cliente vê só a parte dele.
Os pontos-chave. O comentário condicional do começo mostra o bloco só ao Outlook, e o segundo comentário só aos demais. Os espaçamentos ficam no próprio link e não na célula, então toda a área é clicável.
O fundo está duplicado: como atributo da célula e nos estilos. Alguns clientes leem um, outros o outro.
Tamanho do botão no celular
O tamanho do botão no celular é um tema à parte onde os erros se concentram.
A altura mínima de um botão para o polegar são 44 pixels, melhor 48. Abaixo disso, acertar vira questão de sorte, sobretudo em movimento.
Em tela estreita defina a largura em porcentagem e não em pixels. Um botão de 320 pixels numa tela de 320 encosta nas bordas e sai do e-mail.
O que verificar antes de enviar
- abra o e-mail no celular e toque na borda do botão, não no centro
- confira no Outlook: o fundo e os cantos arredondados estão lá
- clique no link e confirme que ele abre
- veja no modo escuro: o texto do botão se fundiu com o fundo?
- confirme que o endereço é completo e começa com https
O primeiro item é o que mais importa: tocar na borda é o que revela se o botão inteiro é clicável ou só o rótulo.
Como um construtor resolve isso
No Mailvex o botão é um bloco pronto, e o compilador adiciona sozinho o código VML para o Outlook, duplica o fundo e define uma altura mínima para o celular.
O arredondamento, a cor e o tamanho são configurados uma vez no manual da marca e aplicados a todos os botões de todos os e-mails.
Monte um e-mail com botões que funcionam em todo lugar.
Ver modelosPerguntas frequentes
Por que só o texto é clicável?
Os espaçamentos estão na célula da tabela e não no próprio link. O link ocupa apenas a área do rótulo, e os espaçamentos ficam fora. A solução é mover os espaçamentos para o link e torná-lo de bloco.
Por que o Outlook precisa de código à parte?
O Outlook clássico para Windows usa o motor de um editor de texto em vez de um de navegador. Ele não entende cantos arredondados, ignora os espaçamentos do link e não mostra fundo nos blocos. VML é a única forma de ter ali um botão decente.
Qual o tamanho mínimo de botão no celular?
Altura de 44 pixels, melhor 48. É o mínimo para acertar com o polegar com segurança. Em tela estreita defina a largura em porcentagem e não em pixels, ou o botão sairá do e-mail.
