--- title: Advanced Button description: 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… url: "https://shapekode.com/product/shapeblock/docs/advanced-button/" updated: "2026-11-04" category: Content Block --- # Advanced Button 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 Animated Hover Buttons in WordPress Gutenberg | ShapeBlock Pro Advanced Button](https://www.youtube.com/embed/1zIiEf4a8uc?feature=oembed) ## 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. ![Advanced Button block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-advanced-button-1.webp) ### 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. ![Advanced Button block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-advanced-button-2.webp) ## 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. ![Advanced Button block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-advanced-button-3.webp) ## 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 Button block, Style tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-advanced-button-4.webp) ## 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](https://shapekode.com/product/shapeblock/advanced-button/).