--- title: Button Block description: "The \"Button\" block is is available in the [PublishPress Blocks](https://publishpress.com/links/blocks) plugin. This block is based on the default Button block in Gutenberg. This improved version of the button block has tons of extra features including advanced styling such as hover,…" url: "https://publishpress.com/knowledge-base/advanced-button-block/" updated: "2026-10-14" category: PublishPress Blocks / PublishPress Blocks --- # Button Block The "Button" block is is available in the [PublishPress Blocks](https://publishpress.com/links/blocks) plugin. This block is based on the default Button block in Gutenberg. This improved version of the button block has tons of extra features including advanced styling such as hover, margin, border, padding, shadows and more. --- ## How to create the Button block You can create a PublishPress Button block by clicking the "Button - PublishPress" button in the [PublishPress Blocks](https://publishpress.com/links/blocks) section. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-15.20.10.png) After you have selected the "Button - PublishPress" you'll see a new block that looks like this screenshot below: ![Screen Shot 2020 12 10 At 12.18.02](https://publishpress.com/wp-content/uploads/2020/12/Screen-Shot-2020-12-10-at-12.18.02.png) --- ## Settings for the PublishPress Button block In the right sidebar, you can adjust some settings for the 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. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-15.21.43.png) --- ## Text size and colors in the PublishPress 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 ![](https://publishpress.com/wp-content/uploads/2020/05/button-text-color.png) --- ## Borders in the PublishPress 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 ![](https://publishpress.com/wp-content/uploads/2020/05/border-button.png) --- ## Margin and padding in the PublishPress 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. ![](https://publishpress.com/wp-content/uploads/2020/05/advanced-button-padding.png) --- ## Hover effects in the PublishPress 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 ![](https://publishpress.com/wp-content/uploads/2020/05/advanced-button-hover.png) --- ## Nofollow and noreferrer support (Pro) This feature requires the Pro version of the PublishPress Blocks plugin. In the Pro version of the PublishPress Blocks plugin, you are able to add the nofollow and noreferrer to the `rel` attribute for your buttons. Look for the "Link rel" panel. ![Advanced Button - PublishPress Blocks](https://publishpress.com/wp-content/uploads/2022/04/Screen-Shot-2022-04-27-at-14.41.10.png) --- ## Google font support (Pro) This feature requires the Pro version of the PublishPress Blocks plugin. In the Pro version of the PublishPress Blocks plugin, you can choose between 1400 available Google fonts to customize the button text. Look for the "Font" panel. ![Advanced Button - PublishPress Blocks](https://publishpress.com/wp-content/uploads/2022/04/Screen-Shot-2022-04-27-at-14.38.17.png) - **Font family**. Choose between 1400 available Google fonts - **Font weight + Style**. (when Font family is different to "default") --- ## Icon support (Pro) This feature requires the Pro version of the PublishPress Blocks plugin. In the Pro version of the PublishPress Blocks plugin, you can add icons to your Buttons. Do it through the "Icon" panel in the sidebar. ![Advanced Button - PublishPress Blocks , icon](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.11.14.png) - **Display icon** - **Icon library (Material icon)** - **Icon size (px)** - **Icon color**. Leave blank to use the same color from the text button. - **Icon position** - **Icon spacing**. Spacing between icon and text. ![Advanced Button - PublishPress Blocks , icon](https://publishpress.com/wp-content/uploads/2022/03/Screen-Shot-2022-03-10-at-13.11.26.png) --- ## Default settings for all your PublishPress Button blocks You can set default options for every PublishPress Button block added to your site. This is possible with the [PublishPress Blocks default configuration](https://publishpress.com/knowledge-base/default-blocks-config/) feature and it allows you to create a consistent look-and-feel for all your buttons. - Go to "Blocks" in your WordPress admin menu, then "PublishPress Blocks". - Click the "Button" settings icon. ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-15.24.50.png) - Adjust the default settings and click "Save". ![](https://publishpress.com/wp-content/uploads/2022/10/Screen-Shot-2022-10-05-at-15.25.27.png)