How to use the Button element

In this article, you will learn about Button elements and how to use them to create highly converting pages.

What is the Button Element? 

Button Element is designed to drive CTA's of your website which is the chance to motivate your audience to take real steps toward becoming a customer or a client. It can be the determining factor between a lead or a conversion. There are different ways you can take advantage of the Button element:

  • Link to other GemPages pages.
  • Link to other Non-Gempages pages or external pages. 
  • Create an Anchor link (scrolling down to a specific spot).
  • Link to a pop-up.

    Please well-noted that standard format should included https:// for the link to function properly. For instance, it should be instead of

You can quickly find the element on the left sidebar of the editor page.


Settings Tab's Parameters

  1. Text: You can edit the context of the button here.

  2. Edit Link

    • Link: You can insert a link in this field to trigger the action once customers click on the button, and you can also scroll to a specific spot or redirect to an existing page manually. 

    Pick Action: This feature only works with a Popup element.
    • Open in: You can decide the action after clicking on the Button: open the link on the current tab or in a new tab. 

  3. Typography: Style the text of the cart button with multiple options.

    • Font Size (in pixel): For these parameters, you just simply slide the adjustment bar from left to right and vice versa to configure them.
    • Font: You can choose any fonts which are available in the Font Manager or add any custom fonts from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there is no limit to configure fonts in your store. You can take a look at this article to know how to add a custom font to your site.
    • Text Transform: You can design the text for it to appear in all-uppercase or all-lowercase, or with each word capitalized.


  4. Button color: It allows you to set the background color and the text color when it is normal or when it's on hover. 

  5. Dimension: Adjust your button's width and height here (in pixel or percent).  

  6. Alignment: Align the checkbox. The three primary types of text alignment include left-aligned, centered, and right-aligned. 

  7. Extra class: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.

The right Call to Action Button at the perfect moment can push the person in the right direction, sealing the conversion, and ideally creating a loyal customer. The CTA can be a subtle or blunt way to tell your customer that he or she should take action now for the best benefit. The CTA can be a subtle or blunt way to tell your customer that he or she should take action now for the best benefit. Don't hesitate to get in touch with Gempages technical support team if you have further questions to create effective and stunning-looking Button elements on your website. 

Was this helpful?