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
- Open the Elements Panel from the left sidebar.
- Drag and drop the Button Element onto your page where you see a thick gray line.
- 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 Typografie-instellingen:
- Font Family
- Maat
- Letterafstand
- 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.
Iconen
- Add an icon to the button for extra clarity.
- Change its size En 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.