Button Block

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.

Powered by BetterDocs