Botão de e-mail no Outlook: como fazer com VML

por João Alberto · atualizado em 27 de outubro de 2026

Você monta um botão bonito, arredondado, com espaço em volta do texto. No Outlook para Windows ele vira um link sublinhado ou um retângulo apertado. A causa é o motor de renderização, e a solução é desenhar o botão em VML.

Por que o botão quebra no Outlook

O Outlook clássico para Windows (as versões instaladas no computador, incluindo a do Microsoft 365) usa o Word para mostrar e-mails, e não um navegador. O Word ignora várias propriedades que um botão em HTML usa:

• padding em links: o espaço em volta do texto some;
• border-radius: os cantos ficam retos;
• display:inline-block e boa parte do posicionamento.

O que é VML

VML (Vector Markup Language) é um formato antigo de desenho da Microsoft que o motor do Word ainda entende. Com ele dá para desenhar um retângulo arredondado, preenchido e clicável: um botão de verdade dentro do Outlook.

O truque é mostrar o VML só para o Outlook e o botão HTML para todos os outros programas. Isso é feito com comentários condicionais, que só o Outlook lê:

• <!--[if mso]> ... <![endif]-->: aparece só no Outlook;
• <!--[if !mso]><!--> ... <!--<![endif]-->: aparece em todos, menos no Outlook.

Código pronto

<div style="text-align:center;">
  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    href="https://seusite.com.br"
    style="height:46px;v-text-anchor:middle;width:200px;"
    arcsize="15%" stroked="f" fillcolor="#2563eb">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
      Saiba mais
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-->
  <a href="https://seusite.com.br"
    style="display:inline-block;background-color:#2563eb;color:#ffffff;
    font-family:Arial,sans-serif;font-size:16px;font-weight:bold;
    text-decoration:none;padding:12px 30px;border-radius:10px;">Saiba mais</a>
  <!--<![endif]-->
</div>

Os detalhes que mais dão errado

• Largura fixa. O VML não cresce com o texto. Se o texto for longo, aumente o width ou ele quebra em duas linhas.
• Link nos dois lugares. O href precisa estar no v:roundrect e no <a>. Esquecer um deles deixa o botão morto em parte dos programas.
• Mesmas cores. fillcolor no VML e background-color no HTML devem ser iguais, ou o botão muda de cor de um programa para outro.
• Borda. Sem borda, use stroked="f". Com borda, troque por strokecolor="#1d4ed8".
• Cantos. arcsize é uma porcentagem da altura: 15% dá cantos levemente arredondados, 50% deixa o botão em formato de pílula.
• Centralização vertical. v-text-anchor:middle mantém o texto no meio da altura.

E o novo Outlook?

O novo Outlook para Windows, o Outlook na web e os aplicativos de celular usam motor de navegador e mostram o botão HTML normalmente. O VML continua necessário enquanto houver gente no Outlook clássico, o que ainda é comum em empresas.

Como testar

O jeito mais confiável é enviar para uma conta aberta no Outlook clássico para Windows. Ferramentas como Litmus e Email on Acid mostram o e-mail em dezenas de programas de uma vez.

No gerador de e-mail HTML esse botão sai pronto: a versão em VML é gerada com as cores escolhidas e a largura calculada pelo tamanho do texto.