How to add BUTTONS in GreatPages

Follow the step by step below to add a button to your page in GreatPages.

Open your page editor;

You will need to click the button icon in the left side menu of the screen.

Next, the button will be inserted into the page. You can edit it however you like...

If you click the "Edit" button, a panel will open on the right side of the screen, where you can edit the button's styles (its visual appearance), add animations and configure it (add scripts directly to the button - advanced editing).

Now, to add a link to the button you will need to click the "Link" section, indicated in the image below.

You can choose to add an External Link (another URL, outside this page), Internal Link (link the button click to a specific block within the same page) or Pop-up (a box that will open on the screen when clicked).

STYLES

Below the page link settings, we have the style settings, starting with:

Text style: The text style determines the font size relative to the page's Design System settings.
Button color: Here you can set the button's background color and text color. Keep in mind that the chosen color will follow the style of all other buttons on the page, unless you save a new color for this specific button.
Hover color: The color applied when hovering the cursor over the button. By default, the color used automatically contrasts with the button color.
Content: Action text used on the form's conversion button..

BORDES AND SOMBRA

If you continue scrolling down on the style settings screen, you will see the border and shadow settings options.

Border: Here, you fine-tune the button's borders, making them more or less rounded based on the number of pixels.
Shadow: Shadow effect around the button.

ANIMACIÓN

Effect: Select the desired effect style for the element. By switching between the effects, you can see how each one works.
Direction: Here you can configure the direction of the animation—for example: up, down, right, or left.
Speed: Here you define the speed of your animation. The closer it is to 250ms, the faster the speed; the closer it is to 2000ms, the slower the animation speed.
Delay: This setting allows you to define the delay time for your animation. This time ranges from 0ms to 2000ms.
Repeat: In this function, you can choose whether the animation appears only once or continuously.

After configuring the visual appearance of the action button, you can click "Configure" to change its visibility. This feature is useful if you want to hide this element on any version of the page;

Finally, if you click on "Code," you can edit the button's HTML, add a script that runs upon clicking, or copy the element's ID. Remember that these are advanced functions; use them only if you have the necessary knowledge or are being taught how to use them.

We hope this helped! If you have any questions, get in touch with our team.

Updated on: 08/10/2026

Was this article helpful?

Thank you!