Description
Like the title suggests, the Button Block is for adding and controlling buttons.
Buttons can be set to link to other pages or posts on your site, to containers within a page (see HTML Anchors), or to an external page. They’re a great way to make a link stand out from the rest of the page, especially if it points to conversion content.
Screenshots
Button Settings
Video Popup
When linked to a video such as YouTube or Vimeo, this toggle will convert the link into a video popup, allowing the video to be played in a modal overview without leaving the page.
Open Link in New Tab
This is a popular setting for SEO, to share helpful links but not send people away from your website. If the link is clicked, the destination opens in a new tab instead of replacing your site in the same tab. This can create issues for accessibility, so you should read up on the pros and cons before deciding.
Add “noreferrer” Tag
The noreferrer tag hides the source of the link from the other site’s analytics. If you enable noreferrer, you can link to another site without passing on data about your site to that party.
Add “noopener” Tag
The noopener tag enhances website security, especially on links set to open in a new tab. If you enable noopener, you prevent the other website from gaining any kind of access to your page through the browser session.
Padding & Margins
Padding: These top, right, bottom, and left sliders, with a range from 0 to 12, control the amount of interior space there is between the edges of the button and its contents (ie. the text). More about Padding.
Margins: These sliders, with a range from 0 to 12, control the amount of exterior space there is around the button and adjacent objects. Each one controls the margins around the top, bottom, left, and right of the button. More about Margin.
Button Class
This setting allows you to style the button’s appearance by selecting from a dropdown of preset button and link styles, which are set in Component Styles > Buttons.
Advanced
Additional CSS Class(es)
This allows you to enter a unique Class identifier, for custom CSS targeting within the theme to faciliate custom development. More about Theme Customizations.
It also enables the use of Foundry utility classes. More about Utility Classes.