Botão de Ação com o Chat GPT

Neste artigo te mostro, passo a passo, como criar um botão de ação com o Chat GPT e como incorporar no Google Sites.

O objetivo é criar uma nova opção de botão personalizado e interativo no mouseover, por exemplo, troca de cor e aumento no tamanho do botão.Isso com certeza vai elevar o nível do seu site, tornando-o mais profissional e cativante. 

O Google Sites já vem com a opção de incluir botão no site, só que é bem limitada em termos de estilos do botão, como por exemplo: tamanho do botão, tamanho da fonte, cores do fundo e, principalmente, interatividade.

É possível também incluir uma imagem como botão de ação e colocar um link nessa imagem. Esse tipo de botão precisa ser criado em algum aplicativo de criação de imagens, como o Canva por exemplo. O que leva mais tempo além de não ter interação no mouseover.

Neste artigo vou apresentar uma uma 3ª opção, que é criar e personalizar um botão de ação com o Chat GPT e depois incorporar no Google Sites.

O que é um botão de ação?

Um botão de ação (ou CTA – Call to Action) é um elemento essencial em qualquer estratégia de marketing digital. 

Ele guia o visitante para realizar uma ação específica, funcionando como uma ponte entre o visitante e o objetivo principal da sua página.

Exemplos de ações que um botão de ação pode direcionar:

  • Comprar um produto: facilitar o processo de compra.
  • Inscrever-se em uma lista de e-mail: aumentar o engajamento com o público.
  • Agendar uma consulta: gerar leads para serviços.
  • Baixar um material gratuito: atrair visitantes interessados em conteúdos exclusivos.
  • Solicitar um orçamento: abrir um canal direto para conversão.

Um botão de ação bem posicionado e funcional é a diferença entre um visitante passivo e um cliente engajado.

Por que usar um botão de ação?

Os botões de ação são fundamentais para garantir que o usuário siga o caminho ideal dentro do site. Veja os principais benefícios:

Foco no objetivo principal

O botão direciona o visitante diretamente para o próximo passo do funil de conversão, eliminando distrações e deixando clara a ação que se espera dele.

Gatilhos mentais

Mensagens estratégicas no botão, como “Compre agora e economize 30%” ou “Garanta sua vaga grátis”, acionam gatilhos mentais de urgência ou exclusividade, incentivando o visitante a agir rapidamente.

Facilita a navegação

Com botões de ação bem definidos, o visitante não precisa pensar sobre o que fazer a seguir. A navegação se torna mais intuitiva e fluida, reduzindo a chance de abandono da página.

Estética que chama atenção

Um botão bem desenhado com cores contrastantes, tamanhos adequados e mensagens diretas se destaca na página e aumenta as chances de clique.

Importância de um botão interativo

Um botão interativo adiciona um toque especial à experiência do usuário. Efeitos como mudança de cor, leve ampliação ou transições suaves ao passar o mouse sobre o botão (hover) criam um efeito visual que atrai a atenção e incentiva o clique.

Além disso, esses efeitos podem:

  • Transmitir uma sensação de profissionalismo;
  • Melhorar a usabilidade;
  • Tornar a experiência mais envolvente e dinâmica.

No Google Sites, os botões interativos não são configuráveis diretamente. Por isso, neste tutorial, vamos usar o Chat GPT para gerar um botão com código personalizado e adicionar interatividade avançada ao seu site.

O que vamos criar?

O botão de ação que vamos desenvolver será simples, funcional e terá um visual minimalista, com características como:

  • Fonte personalizada: escolha do tipo, tamanho e espaçamento.
  • Cores ajustáveis: definição da cor do fundo e do texto.
  • Bordas arredondadas: para um design moderno e atraente.
  • Interatividade: muda de cor e aumenta levemente ao passar o mouse, com uma transição suave.
  • Posicionamento ajustado: alinhado de forma personalizada na página.

Ao final, teremos um botão que se destaca e oferece uma experiência visual impactante e profissional.

Prompt para criar botão de ação com o Chat GPT

Com base nas informações acima, vamos usar o Chat GPT para criar nosso botão de ação interativo. Abaixo está o prompt que você vai usar:

Crie um script num código único pra gerar um botão de ação;  

Posição do botão absoluta, alinhada no topo, à esquerda, com margem de 10px;

Cor de fundo da página: transparente;

Texto do botão: "QUERO COMEÇAR AGORA!";
Estilo do texto: fonte Montserrat, tamanho 1.1rem, cor #111,  alinhado ao centro;

Cor de fundo do botão: #B5E100; Sem borda;
Espaçamento interno do botão (padding) de 21px;
Cantos arredondados em 7px;

No mouseover, aumente o tamanho todo o botão em 5%, cor de fundo: #B289FF, com transição suave;

No link inclua o texto "SEU LINK AQUI". Link sem sublinhado.

Copie todo o prompt acima e cole no Chat GPT. Em segundos, ele vai gerar um código completíssimo para o seu botão de ação.

Código completo do botão de ação

Caso o seu script não tenha ficado 100%, segue abaixo o código completo do botão de ação criado com o Chat GPT. É só copiar e colar no layout da sua página de vendas.

Como o código está todo comentado, você pode editar estilo de fonte, tamanho, espaçamentos, cores etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botão de Ação</title>
<style>
  /* Estilo geral da página */
  body {
    margin: 0; /* Remove margens padrão da página */
    padding: 0; /* Remove espaçamento padrão da página */
    background-color: transparent; /* Fundo transparente */
  }
  /* Estilo do botão de ação */
  .action-button {
    position: absolute; /* Permite posicionamento absoluto */
    top: 10px; /* Distância de 10px do topo da página */
    left: 10px; /* Distância de 10px do lado esquerdo da página */
    background-color: #B5E100; /* Cor de fundo inicial do botão */
    color: #111; /* Cor do texto */
    font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
    font-size: 1.1rem; /* Tamanho do texto */
    text-align: center; /* Centraliza o texto horizontalmente */
    text-decoration: none; /* Remove o sublinhado do link */
    padding: 21px; /* Espaçamento interno do botão */
    border: none; /* Remove bordas */
    border-radius: 7px; /* Arredonda os cantos do botão */
    cursor: pointer; /* Muda o cursor para o formato de "mão" ao passar sobre o botão */
    transition: all 0.3s ease; /* Adiciona uma transição suave para as alterações de estilo */
    display: inline-block; /* Garante que o botão seja tratado como um elemento em linha com comportamento de bloco */
  }
  /* Efeito de mouseover no botão */
  .action-button:hover {
    background-color: #B289FF; /* Cor de fundo ao passar o mouse */
    transform: scale(1.05); /* Aumenta o tamanho do botão em 5% */
  }
</style>
</head>
<body>
<a href="SEU LINK AQUI" class="action-button">QUERO COMEÇAR AGORA!</a>
</body>
</html>

Incorporando o código no Google Sites

Depois que o código estiver pronto, é hora de integrá-lo ao Google Sites. Siga o passo a passo:

  1. Copie o código gerado pelo Chat GPT.
  2. Acesse o Google Sites e edite a página onde deseja adicionar o contador.
  3. No menu lateral, clique em Inserir e depois selecione IncorporarIncorporar código.
  4. Cole o código no campo disponível e clique em Próximo. Um preview será exibido.
  5. Clique em Inserir e ajuste o tamanho do bloco conforme necessário.
  6. Use o mouse para posicionar o botão no local desejado no layout.
  7. Visualize a página para verificar como o botão se comporta em diferentes telas (computador e celular).

Templates Google Sites: Crie seu site de forma rápida e profissional!

Chega de perder horas tentando criar um site do zero! Com meus templates para Google Sites, você garante um site moderno, rápido, seguro e super fácil de personalizar. 

Feitos para facilitar sua vida e dar aquele up no profissionalismo do seu negócio.

Por que escolher nossos templates?

✏️ 100% Editável
😊 Fácil de usar
🕘 Economize tempo
✨ Design funcional
📲 Responsivo
🔎Otimizado para SEO.

Oferta Especial: Mais de 75% OFF!

Garanta agora mesmo seu Pack Completo de Templates Google Sites com um desconto incrível e tenha sites profissionais por um valor que cabe no seu bolso. Ah, e dá pra pagar parcelado em até 12x!

Inclui bônus exclusivos Canva para te ajudar na padronização e personalização das imagens do seu site.

Sem complicação: Não precisa de hospedagem! Só é necessário um e-mail Gmail para receber todos os templates no momento da compra.

🚀 Pack Completo no Pix ou parcelado no Cartão em até 12x.

Pack Templates Google Sites

Vídeo tutorial: Contador Regressivo no Google Sites Feito com Chat GPT

Conclusão – botão de ação com o Chat GPT

Criar um botão de ação funcional, personalizado e interativo com o Chat GPT nunca foi tão fácil!

Ele não só valoriza o design da sua landing page como também potencializa suas chances de conversão.

Agora é com você! Coloque em prática o passo a passo e aproveite para criar páginas de vendas ainda mais atraentes e profissionais. 🚀

Sobre o Autor

Renato Faria
Renato Faria

Designer Gráfico, Empreendedor Digital e Blogueiro. Carioca, criador da agência Interage Design. Apaixonado por empreender e criar oportunidades.

    0 Comentários

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *