> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Como adicionar BOTÕES no GreatPages ${youtube}[Video tutorial: Como adicionar BOTÕES no GreatPages](KPfupNJRd7Y) Siga o passo a passo para adicionar um **botão** em sua página no **GreatPages**. 1. Acesse o seu editor de página; ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_14a3a0b.png =650x385) 2. Você precisará clicar no ícone de botão, no menu lateral esquerdo da tela. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_a9enp6.png =650x595) 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). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1fo5pnw.png =650x356) ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_13m4x5i.png =650x434) ###### LINK Agora, para adicionar um link no botão você precisará clicar na sessão de **"Link"**, indicado na imagem abaixo. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_14zp8sj.png =650x443) 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). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_16y0nj2.png =650x430) ###### ESTILOS Abaixo das configurações de link da página, estão disponíveis as configurações de estilo, começando por: ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_an1ck6.png =650x441) * **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. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1buvii7.png =650x543) * **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 ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1tymasw.png =650x542) * **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; ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1n3kcs7.png =650x432) 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1fexy1.png =650x584) Esperamos ter ajudado! Em caso de dúvidas, entre em contato com a nossa equipe. :-)