Buttons link your audience to the content of your choice, giving you more control over the way they navigate. In this article, you'll learn how to add a button and link it to specific content.
💡 You can set the default styling of a button in the brand settings.
In this article
What is a button?
A button is an element that your readers can click on, after which they will be taken to the content of your choice. You can link from a button to the following places:
- External URL
- Cookie consent
How to add a button
Go to the elements tab and drag and drop a button onto your page.
💡When you're working with the Content Builder, it's not possible to add a button to your page. They're included in block templates.
After you have added a button to your page, a pop-up will appear in which you can select where you want to link to.
On your page, you can navigate to the button to change where you link to. Click on the pencil icon to edit link, which will open up the link pop-up again.
Styling a button in the brand settings
Buttons can be styled from the brand settings. These settings will apply to all of the buttons in your Foleon Doc.
This section enables you to set the following buttons:
Button 1: Click on the button to set the "Button 1" styling. You can later select this styling in the settings after adding a button to your content. If you then want to edit the button on a specific page, you can edit it manually within a specific element.
Button 2: Set the styling for "Button 2" if you want to add an alternative button style to the brand settings.
💡 You can override the brand styling for a button by changing the styling in the element settings.
Align buttons horizontally
The element height setting enables you to create consistent card-like layouts — by aligning buttons horizontally across columns. This layout is useful for pages that feature a product catalog or a Meet the team section, just to give you an example.
📚 Learn how to align buttons horizontally in our article Align elements horizontally with height.
In the element settings of your button element, you can style your button the way you want to. Hover over the button and click on the cogwheel icon. A pop-up with the element settings will appear. We will go over each of the element settings below.
When you're working with the Content Builder, you'll have limited element settings. Compared to other elements, it's possible to duplicate or delete buttons — allowing you to build a layout such as a contents page.
💡 You can also create a 'Hover' state for the button, allowing you to control what the button looks like when the reader hovers over it. This is also known as the "mouse-over" effect.
In the general settings a link can be added or changed. A button can link to external URL, page, overlay, document, block, or cookie consent.
Here you can set the background color of the button.
💡 You can also set a background for the hover state.
The border option allows you to create a full border or a border on specific sides of your element. All sides at once is selected by default, which means that when you increase the Border thickness, the same amount of border will appear on all sides at the same time.
When All sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color that is selected at the Border color picker.
💡 You can also set a border for the hover state.
You can add a shadow to most of the elements. Choose the Shadow color with the color picker. After selecting the color you can choose the Horizontal position and Vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.
💡 You can also set a shadow for the hover state.
Spacing can be increased to create more space between the border of the element and the content within the element.
With this option, you can change the alignment of the content within the element itself. The content can be aligned Left, Center, or Right.
With this option, it is possible to choose where the button is visible. This allows you to show certain elements on desktop but hide them on mobile, or the other way around.
The Entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.