Create buttons that stand out! This guide will show you how to add, customize, and style them easily, making them look great and work flawlessly.
How to Change the Font of Your Button Element
In the right sidebar menu, under the Text tab, you can adjust:
Font Size – controls how large or small the text appears.
Font Weight – adjusts the thickness of the text, from light to bold.
Line Height – defines the vertical spacing between lines of text.
Letter Spacing – controls the amount of space between each character.
Tips for Using the Button Element
You can size and position your buttons by using columns or setting a maximum width.
To edit the button, simply click on it to change its text directly and type whatever you want. To set or change the link, go to the right sidebar menu under the Main tab and enter the desired URL in the Link field. If you are linking to an external site, always include the full URL starting with “https://” or “http://”.
Linking to a Page
If you are linking within the same site, simply add the page path, such as “/pages/tours”, and users will be directed to that page.
For external links, include the full URL of the page, including the “https://” protocol. The easiest way to ensure accuracy is to copy the link directly from your browser’s address bar.
Tip: To keep your buttons mobile-friendly, avoid adding large side margins. Excessive margins can make buttons look too narrow or even disappear on smaller screens.
How to Style Your Button
In the Style tab, you can customize the button’s appearance when it is in its normal state:
Text Color – choose the color of the button text.
Background Color – set the color that fills the button.
Border Color – define the color of the button’s outline.
In the Hover Style tab, you can define how the button looks when a user hovers over it:
Text Color – set the text color on hover.
Background Color – choose a different background color to highlight the button.
Border Color – adjust the border color to emphasize interaction.