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