The Advanced Button Block adds a button with a hover effect. You can choose from eight styles, such as a sliding fill, rolling letters, an icon that joins the button, a badge, or a button that follows the pointer.

Use it for calls to action in heroes, pricing tables, and banners.

How to Add an Advanced Button Block

Follow these steps to add and configure the Advanced Button Block in the Gutenberg editor.

Step 1: Add the Advanced Button Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the + button to open the block inserter.
3. Search for Advanced Button under ShapeBlock.
4. Insert the Advanced Button Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Type the button text directly on the block.

Step 2: Configure the Advanced Button Block

Select the Advanced Button Block and open its settings in the right-hand sidebar. The available tabs are:

• Settings: Choose the hover style, add a link, set the alignment, and add an icon.
• Style: Customize the button, icon, and badge for the normal and hover states.
• Advanced: Configure the block padding, margin, and background.

Click Show Hover in the block toolbar to see and style the hover state in the editor.

Settings Tab

The Settings tab contains the Button and Icon panels.

1. Button

• Style: Choose how the button moves when a visitor points at it. Point at the button in the editor to see it.
  • Slide: A color fill grows over the button from one side.
  • Bottom Slide: A new face slides up from the bottom, text and all.
  • Letter Effect: The text drops away and comes back letter by letter.
  • Letter Effect 2 (Roll): A copy of the text rolls in as the text rolls out.
  • Combine Icon: The text sits in a pill with the icon in a circle beside it. On hover, the icon leaves and a new one comes in.
  • Sticky: The text leans towards the pointer while it is over the button.
  • With Badge: A small label is shown after the text.
  • Magnetic: The hover color spreads from where the pointer comes in and shrinks back to where it leaves.
• Slide From: Choose where the fill comes from: Left, Right, Top, or Bottom. This option appears with the Slide style.
• Roll Direction: Choose Bottom to Top or Top to Bottom. This option appears with the Letter Effect 2 (Roll) style.
• Sticky Strength: Set how far the text follows the pointer. A lower number follows further. This option appears with the Sticky style.
• Fill Speed (ms): Set how fast the fill spreads. This option appears with the Magnetic style.
• Badge Text: Enter the text shown in the badge. This option appears with the With Badge style.
• Link: Enter the URL the button opens.
• Open in a New Tab: Open the link in a new browser tab. This option appears when a link is entered.
• Add rel=”nofollow”: Add the nofollow attribute to the link. This option appears when a link is entered.
• Alignment: Align the button Left, Center, or Right, or make it Full Width. Responsive settings are available.

2. Icon

This panel is not shown with the Letter Effect style.

• Icon: Choose an icon for the button.
• Icon Position: Show the icon After the Text or Before the Text.
• Icon Spacing: Set the space between the icon and the text. When empty, the space is 10px.
• Move Up or Down: Nudge the icon up or down to line it up with the text. For example, -2px lifts the icon.

Style Tab

The Style tab contains the Button, Icon, and Badge panels. Each panel has Normal and Hover tabs.

1. Button

• Typography: Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.
• Text Colour: Set the button text color.
• Background: Set the button background color or gradient. On the Hover tab of the Slide, Bottom Slide, and Magnetic styles this is called Fill Colour and sets the color of the moving fill.
• Border: Set the border width, style, and color. On the Hover tab, set the Border Colour.
• Corner Radius: Round the button corners.
• Shadow: Add a shadow to the button. A different shadow can be set on the Hover tab.
• Padding: Set the space inside the button. Responsive settings are available.
• Width: Set the button width. When empty, the button is as wide as its text.
• Height: Set the button height.

Note: Width and Height can also be set on the Hover tab to make the button grow when pointed at.

2. Icon

This panel appears when the button has an icon.

• Colour: Set the icon color.
• Background: Set the background color or gradient behind the icon.
• Icon Size: Set the icon size.
• Box Width and Box Height: Set the size of the box around the icon. With the Combine Icon style, the box is 52px when empty.
• Margin: Set the space around the icon.
• Border: Set the icon box border. On the Hover tab, set the Border Colour.
• Corner Radius: Round the corners of the icon box.
• Rotate (deg): Turn the icon. Set a different angle on the Hover tab to rotate the icon on hover.

3. Badge

This panel appears with the With Badge style.

• Typography: Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.
• Text Colour: Set the badge text color. Can be set for Normal and Hover.
• Background: Set the badge background. Can be set for Normal and Hover.
• Padding and Margin: Set the space inside and around the badge.
• Corner Radius: Round the badge corners.

Advanced Tab

The Advanced tab provides additional spacing and background controls for the Advanced Button Block. These settings apply to the entire block.

1. Spacing

• Padding: Set the inner spacing around the entire Advanced Button Block. Configure the top, right, bottom, and left values separately.
• Margin: Set the outer spacing around the entire Advanced Button Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

2. Background

• Background: Customize the background of the entire Advanced Button Block using a background color or gradient.

Note: The background applies to the whole block area.

Live demo: see the Advanced Button Block in action on the Advanced Button demo page.