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.

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
• Page
• Overlay
• Document
• Block
• Cookie consent

How to add a button

Go to the elements tab and drag and drop a button onto your page.

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. 

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.

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. 

• General settings
  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.

  

• Background

  Here you can set the background color of the button.

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

  

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

  

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

  

• Spacing

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

  

• Alignment

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

  

• Visibility

  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.

  

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