The Buttons block allows you to add one or multiple buttons to the page.
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.
The margin options use our Spacing component. The margin applies to the button container element, which wraps the inner buttons.
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.
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:
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.
Set the spacing inside the button.
Set the spacing outside the button.
Set the size of the border around the button.
Set the roundness of the button.
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.
You can apply a background gradient to your buttons as well. To learn more about adding a gradient, refer to our Gradient component article.
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:
Set the icon to the left or right of the button text.
Remove the text in the button and use the icon only.
Set the padding around the icon.
Set the size of the icon.
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.
An HTML anchor (or ID) can be useful for targeting specific containers with CSS, or linking to specific containers with an anchor.
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