
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:
- Copie o código gerado pelo Chat GPT.
- Acesse o Google Sites e edite a página onde deseja adicionar o contador.
- No menu lateral, clique em Inserir e depois selecione Incorporar → Incorporar código.
- Cole o código no campo disponível e clique em Próximo. Um preview será exibido.
- Clique em Inserir e ajuste o tamanho do bloco conforme necessário.
- Use o mouse para posicionar o botão no local desejado no layout.
- 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.

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
0 Comentários