All about buttons

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.

What is a button?

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
  • Page
  • Overlay
  • Document
  • Block
  • Cookie consent
Screenshot 2023-05-05 at 13.30.18

 

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.

Screenshot 2023-05-05 at 13.31.03

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.

Screenshot 2023-05-05 at 13.30.18-1

 

Styling a button in the brand settings

Buttons can be styled from the brand settingsThese settings will apply to all of the buttons in your Foleon Doc.

Screenshot 2023-05-05 at 13.31.58

This section enables you to set the following buttons:

  • Button 1: Click 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 want to edit the button on a specific page, you can manually edit it within a specific element.

  • Button 2: Set the styling for "Button 2" 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, to give you an example.

📚 Learn how to align buttons horizontally in our article. Align elements horizontally with height. 

Screenshot 2023-08-02 at 09.57.04

Element settings

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.

  • General settings
    In the general settings a link can be added or changed. A button can link to external URLpage, overlay, document, block, or cookie consent.

    Screenshot 2023-05-05 at 13.50.55
  • Background

Here you can set the button's background color.

💡 You can also set a background for the hover state.

Screenshot 2023-05-05 at 13.33.14


Border
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.

Screenshot 2023-05-05 at 13.33.25
  • Shadow

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.

Screenshot 2023-05-05 at 13.33.38


  • Spacing

    Spacing can be increased to create more space between the border of the element and the content within the element.

    Screenshot 2023-05-05 at 13.52.59
  • Alignment

    With this option, you can change the alignment of the content within the element itself. The content can be aligned LeftCenter, or Right.

  • Visibility

    With this option, you can 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.

    Screenshot 2023-05-05 at 13.34.09
  • Animation

    The Entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.

    Screenshot 2023-05-05 at 13.34.20