Como adicionar BOTÕES no GreatPages

Siga o passo a passo para adicionar um botão em sua página no GreatPages.

1. Acesse o seu editor de página;

2. Você precisará clicar no ícone de botão, no menu lateral esquerdo da tela.

3. Em seguida, o botão será inserido na página. Você poderá editá-lo como quiser...

Se você clicar no botão "Editar" irá abrir uma tela no lado direito da tela, onde você poderá editar os estilos do botão (parte visual dele), inserir animações e configurá-lo (adicionar scripts direto no botão - edição avançada).

LINK

Agora, para adicionar um link no botão você precisará clicar na sessão de "Link", indicado na imagem abaixo.

Você poderá optar por adicionar um Link Externo (outra URL, fora desta página), Link Interno (vincular o clique no botão à um bloco específico dentro da mesma página) ou Pop-up (caixa que irá abrir na tela ao acionar o clique).

ESTILOS

Abaixo das configurações de link da página, estão disponíveis as configurações de estilo, começando por:

• Estilo do texto: determina o tamanho da fonte em comparação com as configurações do Design System da página.
• Cor do botão: aqui você pode configurar a cor de fundo e a cor do texto do botão. Lembre-se de que a cor escolhida seguirá o estilo de todos os demais botões da página, a menos que você salve uma nova cor para este botão.
• Cor do hover: cor aplicada ao passar o cursor sobre o botão. Por padrão, a cor utilizada automaticamente cria um contraste com a cor do botão.
• Conteúdo: texto de ação utilizado no botão de conversão do formulário.

BORDA E SOMBRA

Ao continuar descendo pela tela de configurações de estilo, você encontrará as opções de configuração de borda e sombra.

• Borda: nesta seção, você pode configurar as bordas do botão, deixando-as mais ou menos arredondadas de acordo com a quantidade de pixels definida.
• Sombra: efeito de sombra aplicado ao redor do botão.

ANIMAÇÃO

• Efeito: selecione o estilo de efeito desejado para o elemento. Ao alternar entre os efeitos, você poderá visualizar como cada um funciona.
• Direção: aqui você pode configurar a direção da animação, por exemplo: para cima, para baixo, para a direita ou para a esquerda.
• Velocidade: defina a velocidade da animação. Quanto mais próximo de 250 ms, mais rápida ela será; quanto mais próximo de 2000 ms, mais lenta será a animação.
• Atraso: esta configuração permite definir o tempo de atraso da animação. Esse tempo pode variar de 0 ms a 2000 ms.
• Repetir: nesta função, você pode escolher se a animação será exibida apenas uma vez ou continuamente.

4. Após configurar o aspecto visual do botão de ação, clique em “Configurar” para alterar sua visibilidade. Essa função é útil caso você queira ocultar o elemento em alguma versão da página;

Por fim, ao clicar em “Código”, você poderá editar o HTML do botão, adicionar um script que será executado ao clicar nele ou copiar o ID do elemento. Lembre-se de que esses são recursos avançados. Utilize-os somente se tiver o conhecimento necessário ou estiver seguindo uma orientação específica para configurá-los.

Esperamos ter ajudado! Em caso de dúvidas, entre em contato com a nossa equipe.

Atualizado em: 10/08/2026