Want to add call-to-action buttons to your WordPress pages? The Button block in aThemes Blocks lets you control each button’s color, shape, size, border, hover effects, typography, and icon from inside the Gutenberg editor.
In this guide, we’ll walk you through how to enable and configure the Button block with aThemes Blocks.
Before you get started, make sure you’ve installed and activated the aThemes Blocks plugin on your WordPress site.
Enabling the Button Block
First, enable the Button block from the Blocks Dashboard. Once enabled, open any page or post and add the Button block from the block inserter.
Configuring General Settings
With the Button block selected, open the General tab in the settings sidebar:
- Presets – Choose from predefined button layouts.
- Content – Add a link, include an icon, and set a button ID.
Styling the Button Block
Switch to the Style tab to customize the button’s visual appearance:
- Content – Set button alignment to left, center, right, or full width.
- Text – Adjust typography settings and text color.
- Background – Choose a background color for the button.
- Border – Define the border style (solid, dashed, dotted, etc.) and set the border radius.
- Spacing – Adjust the padding of the button.
Configuring Advanced Settings
The Advanced tab unlocks layout, animation, and responsive controls:
- Layout – Adjust padding, margin, and Z-index.
- Background – Set a background color for the entire block.
- Animation – Apply entrance animations like slide in, fade in, zoom in, rotate in, or flip in.
- Responsive – Hide the block on desktop, tablet, or mobile.
- Advanced – Add custom CSS classes or CSS IDs for further styling.
That’s it! You’ve successfully configured the aThemes Blocks Button block with the settings that match your design.
Next, would you like to add a visual icon to complement your buttons? Check out our guide on Using the Icon Block to learn more.
