Buttons Block

Go to the List of Blocks

The buttons block allows you to add one or more buttons to your page or post.

Note: The buttons block has been available since WordPress 5.4, and the button block was deprecated at the same time.

To add a buttons block, click on the Block Inserter icon and select the buttons block.

You can also type /buttons and hit the Enter key in a new paragraph block to add one quickly.

Detailed instructions on adding blocks can be found here.

Block Toolbar for entire block Block Toolbar for entire block

Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.

The buttons block has a toolbar for the individual button as well as a toolbar for the entire block. 

The main toolbar for the entire block has the standard buttons:

  • Transform to
  • Moving handles
  • Change alignment
  • Change items justification
  • More options

Transform to

Allows you to transform the buttons block into a column or a group block.

Moving handles

The up and down arrow icons can be used to shift a block up and down in your document.

Detailed instructions on moving a block within the editor can be found here

Change alignment

The wide width and the full width align options are available if your theme supports them.

Change items justification

The items justification setting allows you to justify the items (buttons) to the left, center or right. Alternatively you can insert space between items.

More Options:

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

Top ↑

Block Toolbar for individual button Block Toolbar for individual button

The toolbar for the individual buttons has the following options:

  • Change block style
  • Moving handles
  • Link
  • Text editing options
  • More options

Change block style

Clicking on the change block style will let you change the style of the button.

Link

You will be able to add a link to the button. You can choose to set the option to open the link in a new tab.

Text editing options

Bold

You can select the text of the block (button) and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select the text of the block (button) and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

More text editing options

Inline Code

Use inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline Image

The inline image feature allows you to add an image into your text. It has one option: enter the desired pixel width for your image.

Keyboard Input

Use keyboard input feature to format text snippets within your text differently. (The <kbd> element of HTML will be applied.)

Strikethrough

Strikethrough can be used to place a horizontal line through the middle of the selected text.

Example: Buttons Block

Subscript

Subscript can be used to set character slightly below the normal line of type.

Example: Buttons Block

Superscript

Superscript can be used to set character slightly above the normal line of type.

Example: Buttons Block

Text Color

Text Color can be used to set the color of the text.

Example: ButtonsParagraphImage

More Options for the Individual button:

Hide More Settings

The Hide More Settings option hides (or shows) the Block (Button) Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block (button) and then you can paste it into any buttons block.

Duplicate

Duplicate can be used to duplicate selected block (button).

Move To

If you select Move To, you will get a blue line inside your buttons block, you can then use the up and down arrows to move that line left and right to where you want the selected block (button) to be moved into, hitting return on your keyboard at that point moves the block (button) to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the block (button).

Remove Block

With the Remove Block option, you can delete the selected block (button) from your buttons block.

Top ↑

Block Settings for entire block Block Settings for entire block

Advanced

When the entire buttons block is selected – you can add HTML anchor and CSS class(es) to your block.

The advanced section lets you add HTML anchor and a CSS class to your block.

HTML anchor allows you to make a unique web address for a particular buttons block. Then, you’ll be able to link directly to a buttons block of your page.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Top ↑

Block Settings for individual button Block Settings for individual button

When the individual button is selected, you see a different set of options in the settings sidebar.

Button Styles

You can change the style of the individual button.

Typography

You can change the font size of your text. You can choose from a default size or set a custom size.

Color Settings

You can set the text and background colors for the button.

Width Settings

Each button can have its own width inside the buttons block.

Advanced

You can add a Link rel attribute to each button in the block.

You can also add HTML anchor and CSS class(es) to each button in the block.

HTML anchor allows you to make a unique web address for a particular button. Then, you’ll be able to link directly to the button of your page.

The Additional CSS class(es) lets you add CSS class(es) to your button, allowing you to write custom CSS and style the button as you see fit.

Was this article helpful? How could it be improved?