Buttons Overview

The Buttons block allows you to add one or multiple buttons to the page.

When a new Buttons block is added, you will notice that two blocks are actually added to the page. The buttons container, and the button itself. This can be seen in the List View:

Buttons Container

When the buttons container is selected, you can add more buttons within the container:

By default, there is no space between them (as you can see). To add spacing, you can use the Margin options in the Spacing panel for each button.

Then you can use the alignment option to set the alignment of the button(s) inside the buttons container:

Buttons – Spacing

The buttons container also has the following spacing options in the tool bar. You can set each of those options for Desktop, Tablet and Mobile.

Margin

The margin options use our Spacing component. The margin applies to the button container element, which wraps the inner buttons.

Stack Vertically

The stack vertically option will stack the buttons on top of each other. This can be especially useful on mobile.

Fill Horizontal Space

The Fill Horizontal Space option will force the buttons to fill the entire row. If you have one button, it will be 100% wide, if you have two buttons, they will be 50% wide.

Button

Each individual button has a lot of options you can use to fully customize them.

The most important part of a button is its destination. You can access the URL field by clicking the Add Link button.

Once a URL is entered, more options will appear:

Typography

Buttons have the same typography options as our Headline and Container blocks. You can learn more about the available options by referring to our Typography component article.

Button – Spacing

You can also adjust the spacing of your button block. Again, these options can be found in our other blocks as well. To learn more, check out the Spacing component article.

Padding

Set the spacing inside the button.

Margin

Set the spacing outside the button.

Border Size

Set the size of the border around the button.

Border Radius

Set the roundness of the button.

Colors

Of course, you have full control over your button colors using our Color Picker component.

These color options are available on hover as well as the standard view of the button.

Background Gradient

You can apply a background gradient to your buttons as well. To learn more about adding a gradient, refer to our Gradient component article.

Icon

Adding an icon to your button is super easy using the Icon panel.

To learn how to choose an icon, refer to our Icon Picker component article.

You will see the following options once an icon is added:

Icon location

Set the icon to the left or right of the button text.

Remove Text

Remove the text in the button and use the icon only.

Padding

Set the padding around the icon.

Icon Size

Set the size of the icon.

Dynamic Data

The dynamic data feature allows you to return dynamic content in your Headline and Button blocks, and even add dynamic links to them. Post titles, dates, meta, lists of categories, and much more can now all be displayed inside your Buttons and Headlines with only a couple of clicks.

Effects (Pro Feature)

Our Effects feature is one of the more advanced aspects of GenerateBlocks Pro. It allows you to build complex CSS effects for you blocks directly inside the editor. Refer to this article for more info.

Advanced

HTML Anchor

An HTML anchor (or ID) can be useful for targeting specific containers with CSS, or linking to specific containers with an anchor.

ARIA Label

This option adds an aria-label attribute to the button, which will describe what the button does to people using screen readers. use the icon only.

Additional CSS Classes

Add your own custom CSS classes to the button.

Custom Attributes (Pro Feature)

Apply any custom data-* attributes to the headline

Hide on (Pro Feature)

Hide/show the headline on desktop, tablet and mobile devices