Button Block

The PublishPress Button 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.

---

Video guide to the Button block

---

How to create the Button block

You can create a PublishPress Button by clicking the “Button – PublishPress” button in the PublishPress Blocks section.

---

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.

---

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

---

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

---

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.

---

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

---

---

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 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 Button settings icon.

Adjust the default settings and save.