Adicione um Botão HTML no Gmail: Passo a Passo

Este artigo fornece um guia passo a passo sobre como adicionar um botão em HTML ao corpo do e-mail do Gmail, e exemplos de botões personalizados.

mar 16, 2023

Adicione um Botão HTML no Gmail: Passo a Passo

Você já pensou em adicionar um botão em HTML no corpo do seu e-mail para tornar sua comunicação mais profissional e interativa? Se você usa o Gmail, pode fazer isso facilmente com apenas alguns cliques e substituindo o HTML de um emoticon por um botão personalizado.

Neste artigo, vamos mostrar como adicionar um botão em HTML ao corpo do e-mail do Gmail, passo a passo, e apresentar cinco modelos de botões em HTML para você usar como inspiração. Além disso, vamos explorar os benefícios de usar botões em e-mails e responder algumas perguntas frequentes.

Passo a Passo: Como Adicionar um Botão em HTML ao Corpo do E-mail do Gmail

Para adicionar um botão em HTML ao corpo do seu e-mail no Gmail, siga estes passos simples:

Abra uma nova mensagem no Gmail e insira um emoji 😀 no corpo do e-mail.
Selecione o emoji 😀 e clique com o botão direito do mouse.
Selecione "Inspecionar" no menu que aparece. Isso abrirá a janela de ferramentas de desenvolvimento do navegador.
Na janela de ferramentas de desenvolvimento, você verá o código HTML que corresponde ao emoji 😀que você selecionou.
Clique sobre esse código e selecione "Editar em HTML"
Selecione todo o código do emoji 😀 e substitua pelo código HTML do botão que você deseja adicionar.
Clique com o mouse fora da seleção e observe que o botão deverá aparecer no corpo do e-mail.

Aqui está um exemplo de código HTML para um botão que você pode usar para substituir o emoji:

<button style="background-color:#4CAF50;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button>

Esse código cria um botão verde com o texto "Você Realmente Sabia?" que, quando clicado, leva o usuário para o site do Você Realmente Sabia.

Confira como fazer no vídeo abaixo:

Benefícios de Usar Botões em E-mails

Usar botões em e-mails tem vários benefícios, incluindo:

Aumenta a interatividade: Os botões são elementos clicáveis que encorajam os usuários a interagir com o conteúdo do e-mail.
Torna o conteúdo mais acessível: Os botões são fáceis de ver e clicar em dispositivos móveis, o que torna o conteúdo do e-mail mais acessível.
Melhora a aparência: Os botões personalizados podem ajudar a melhorar a aparência geral do e-mail e fazer com que ele se destaque na caixa de entrada do destinatário.
Facilita a ação do usuário: Os botões direcionam o usuário para uma ação específica, como fazer uma compra ou baixar um arquivo, o que pode facilitar a conversão de leads em vendas.

5 Modelos de Botões em HTML para se Inspirar

Aqui estão cinco modelos de botões em HTML que você pode usar como inspiração para criar o seu próprio botão personalizado para o seu e-mail no Gmail:

Botão Laranja:

<button style="background-color:#FFA500;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button>

Botão Azul:

<button style="background-color:#0074D9;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button>

Botão Vermelho:

<button style="background-color:#FF4136;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button>

Botão Verde Claro:

<button style="background-color:#2ECC40;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button>

Botão Cinza:

<button style="background-color:#AAAAAA;color:white;padding:12px 
               20px;border:none;border-radius:4px;cursor:pointer;">
<a href="https://www.vocerealmentesabia.com/"
  style="color:white;text-decoration:none;"
  >Você Realmente Sabia? </a>
</button

FAQ: Perguntas Frequentes

Aqui estão algumas perguntas frequentes sobre como adicionar um botão em HTML ao corpo do e-mail do Gmail:

Qual é o limite de tamanho do botão em HTML no Gmail?

Não há um limite de tamanho específico para o botão em HTML no Gmail, mas é recomendável manter o tamanho do botão entre 200 e 500 pixels de largura para garantir que ele seja exibido corretamente em diferentes dispositivos.

Posso usar qualquer código HTML para criar meu botão personalizado?

Sim, você pode usar qualquer código HTML para criar seu botão personalizado, desde que ele seja compatível com os padrões da web e funcione corretamente.

O botão personalizado em HTML funciona em todos os clientes de e-mail?

Embora o botão personalizado em HTML funcione em muitos clientes de e-mail, pode haver algumas variações na forma como ele é exibido em diferentes clientes de e-mail. É sempre uma boa ideia testar o botão em vários clientes de e-mail antes de enviá-lo.

Conclusão

Adicionar um botão em HTML ao corpo do e-mail do Gmail é uma maneira fácil e eficaz de tornar sua comunicação mais interativa e profissional. Com apenas alguns cliques e substituindo o HTML de um emoticon por um botão personalizado, você pode melhorar a aparência e a funcionalidade do seu e-mail. Use os modelos de botões em HTML que apresentamos como inspiração para criar seu próprio botão personalizado e comece a usá-lo em seus e-mails hoje mesmo!

Você Realmente Sabia