How to Use the Button Element

Buttons are a key part of any website, guiding users toward important actions like signing up, purchasing, or navigating to another section.

1. Adding a Button to Your Page

1. Open the Elements Panel from the left sidebar.
2. Drag and drop the Button Element onto your page where you see a thick gray line.
3. Click on the button to edit the text and customize its design.

2. Customizing Button Text & Typography

• Click on the button to change the text.
• Modify text styling using Typography Settings:
• Font Family
• Size
• Letter Spacing
• Bold, Italic, Underline, or Uppercase

3. Styling the Button

Background & Borders

• Set a background color for normal and hover states.
• Add a border for an outlined look.
• Apply shadow effects to make it stand out.

Size & Shape

• Choose from Small, Medium, or Large preset sizes.
• Set a custom width and height for a unique look.
• Adjust the corners to be sharp, rounded, or pill-shaped.

Icons

• Add an icon to the button for extra clarity.
• Change its size and position (left or right of the text).

4. Adding Links to the Button

Click on the Link Option to connect the button to:

• A URL – Direct users to an external webpage.
• A Block – Scroll to another section on the same page.
• A Popup – Trigger a modal popup window.
• A File – Offer a downloadable file.

To open the link in a new tab or set it as no-follow, enable these options in the link settings.

5. Creating Multiple Buttons

• Duplicate a button to place two buttons side by side.
• Drag a button to move it below another, stacking them vertically.

6. Making the Button Responsive

• Switch to Tablet or Mobile View to check the button’s layout.
• Adjust size, alignment, and spacing to ensure it looks good on all devices.

Why Use the Button Element?

Eye-catching – Draws attention to key actions.

Highly customizable – Control size, shape, colors, and effects.

Multiple link options – Redirect, scroll, or trigger popups.

Responsive – Adjusts for mobile and tablet views.

By mastering the Button Element, you can create clear and engaging call-to-action buttons that guide users through your website.