Button Element

The Button element is an interactive element that prompts users to take specific actions on your website. However, if your desired action is to add items to the cart, we recommend using the Cart Button element instead.

Add the Button element to your page

Step 1: Access GemPages Dashboard > Pages, and locate the target page to open the editor.

Step 2: In the left sidebar, enter “Button” in the search bar, then drag and drop the Button element to your preferred location in the page.

You can choose from two button styles, one with a symbol and one without.

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Advanced tabs.

Configure the Settings Tab

The Settings tab lets you fully control the appearance, layout, and behavior of the Button element, including:

Size

Control the overall dimensions of the button with flexible width and height options:

• Width: Choose how the button should scale horizontally:
  • Fit content: The button will adjust to the size of its content (text and icon).
  • Auto: Inherit size based on parent container or other styles.
  • Full (100%): The button will expand to fill the full width of its container.
• Height: Set the height to Fit Content (Auto) or a fixed pixel value.
• Padding: Define internal spacing inside the button.

Background

• Color: Set the background color of the button.
• Image: Upload or select a background image. Customize it using:
  • Scale: Cover, Contain, or Auto
  • Position: Set image alignment (center, top-left, etc.)
  • Repeat: Toggle repeat settings
  • Attachment: Choose between Scroll or Fixed
  • SEO: Add Alt text and Image title for accessibility and SEO
  • Preload: Toggle preload to improve Largest Contentful Paint (LCP)

Shape

• Border: Add and customize border color, thickness, and style.
• Corner: Set border radius to round the button corners.
• Shadow: Apply drop shadow effects to enhance visual depth.

Icon

Enable this toggle to display an icon inside the button:

• Icon: Choose from built-in icons or upload custom .SVG icons.
• Position: Place the icon to the left or right of the text.
• Gap: Adjust spacing between the icon and text using the slider or number input.

Text

This section allows you to customize the button label’s typography and appearance:

• Styles: Choose a text preset such as Paragraph 1, Heading, or custom text styles.
• Font: Select from available font families (e.g., Ui-sans-serif) to match your store branding.
• Size: Adjust the text size using the +/– controls.
• Formatting: Apply Bold, Italic, or Underline styles as needed.
• Color: Set the font color using HEX code or the color picker.
• Font Weight: Choose from Normal, Medium, Semi-bold, Bold, etc.
• Line Height: Control the vertical space between lines of text (e.g., 160%).
• Letter Spacing: Adjust the space between letters (e.g., 0.6).
• Transform: Choose how the text appears: 
  • AA: UPPERCASE
  • Aa: Capitalize Each Word
  • aa: lowercase
• Shadow: Apply a text shadow for added contrast or visual depth.

Hover Effect

Customize how the button reacts when hovered:

• Background: Change background color on hover.
• Image: Add a background image for hover state.
• Text Color: Change the text color on hover.
• Border: Add or customize the border style when hovered (color, thickness, stroke).
• Corner: Adjust the corner radius on hover to make edges more rounded or squared.
• Shadow: Apply a shadow effect to give the button more depth when hovered.

Link

Turn your button into a clickable element by enabling the Link toggle. Once enabled, you can define what happens when users click the button:

• After click: Choose the action triggered by the button:
  • Open page: Redirect the user to a specific page or URL.
  • Scroll to: Smoothly scroll to a specific section on the same page using an anchor ID (e.g. #features).
  • Open popup: Trigger a popup window built using GemPages.
  • Send email: Open the user’s email client with a pre-filled recipient address.
  • Make phone call: Initiate a phone call on mobile devices using a tel: link.
• Page/Link: Click “+ Add…” button to, search or paste a URL directly into the search bar
  • Select from your existing Shopify pages 
  • Use the dropdown filter (e.g., “Landing pages”) to narrow your results
  • Click View to preview the page before confirming

Align

Set the horizontal alignment of the button within its container: Left, Center, or Right.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.