Table of Contents
Create different type button with radius blocks button.
1. How to Add Button #
To add the Button Block, click on the Gutenberg editor block inserter plus icon(+) and then find the Button Block from the search option.
After selecting the block you need to fill up your desired text and configure the style.
2. General Settings #
The general settings tab has the presets and button settings.
- Presets: First set the pre-defined preset to get a style.
- Button: Set button text, button URL, button alignment, size and button width.
- Button => Icon: You can enable an icon for the button, set icon position, icon size and icon gap.
3. Styles Settings #
From the styles settings, you can set typography, color, and other styles.
- Button: Set button Typography, Text color, Hover Text Color and padding.
- Button => Background: You can set the button normal or hover the background color.
- Button => Border: Can set button normal or hover border style and border radius.
4. Advanced Settings #
The advanced tab has block wrapper style margin & padding, background, border, and shadow change options. This panel style description is added below.
- Margin: You can set the button margin
- Hover Effect: Select Button hover effect from the pre-defined effect.
- Icon Hover Effect: You can set the button hover effect from the pre-defined effect
- Transition: The transition is used for hover effect transition.
Final Outcome #
Following these basic steps and more customizing, you can style your button block and your want and get your outcome.
