Advanced Button Block

The Advanced Button block is based on the default Button block in Gutenberg. This new version of the block has tons of extra features including advanced styling such as hover, margin, border, padding, shadows and more.

How to create the Advanced Button block

You can create an Advanced Button by clicking its button in the Advanced Gutenberg section.

Settings for the Advanced Button block

In the right sidebar, you can adjust some settings for the the Advanced Button block:

The Styles area gives you 4 predefined styles:

Default
Outlined
Squared
Squared Outline

The Button link area gives you 2 choices:

Link URL
Open in new tab: On/Off.

Text size and colors in the Advanced Button Block

There are three options for customizing the test size, background color and text color for the button:

Text size
Background color
Text color

Borders in the Advanced Button Block

There are 4 customization options for the color and style of the borders of your buttons:

Border radius
Border style: solid, dotted, ridge,…
Border Color
Border width

Margin and padding in the Advanced Button Block

You can control the margin and padding for all four sides of your button:

Margin: top, right, bottom and left.
Padding: top, right, bottom and left.

Hover effects in the Advanced Button Block

You can can choose settings that control what visitors see when they hover over your buttons:

Color Settings:
- Background color
- Text color
- Shadow color
Shadow:
- Opacity
- Transition speed
- Shadow H (horizontal) offset
- Shadow V (vertical) offset
- Shadow blur, spread)
- Shadow spread

Default settings for all your Advanced Button blocks

You can set default options for every Advanced Button block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your buttons.

Go to Adv. Gutenberg in your WordPress admin menu.
Click Configuration, then Default Blocks Config.
Click Advanced Button.

Search