Buttons Block

Go to the List of Blocks

The buttons block allows you to add one or more buttons to your page or post. This block has been available since WordPress 5.4 when the button block was deprecated.

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

The buttons block comes with one individual button block by default. You can customize the text, link, and style for this button. To add more buttons, click the plus (+) icon in the right bottom corner within the buttons block, and a new button will appear. Note that the new button will follow the same style as the existing button.

Block Toolbar

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. 

For the entire block

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

• Transform to
• Block moving handles
• Change items justification
• Change vertical alignment
• Change alignment
• More options

Transform to

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

Block moving handles

Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the buttons block and reposition it anywhere on the editor.

Get more information about moving a block within the editor.

Change items justification

The items justification setting allows you to justify the items (buttons) to the left, center, or right.

When you set it to ‘Space between items’, the buttons block is centered with equal spacing between the buttons, if you have more than 1 button within the buttons block.

Change vertical alignment

You can align the buttons vertically to the top of the buttons group, middle, or bottom.

Change alignment

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

For individual button

The toolbar for the individual buttons has the following additional options:

• Change block style
• 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 can add a link to the button using the Link setting. You can also set it to open the link in a new tab.

To remove the link, click the button and click Unlink in the Block toolbar.

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 a character slightly below the normal line of type.

Example: Buttons _Block

Superscript

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

Example: Buttons ^Block

More Options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.

For the entire block

When the entire buttons block is selected, you have the Layout, Dimensions, and Advanced settings for customization.

Layout

Under Justification settings, you have the following options:

• Justify items left
• Justify items center
• Justify items right
• Space between items (Only for horizontal orientation. The buttons block is centered with equal spacing between the buttons, if you have more than 1 button within the buttons block.)

You can have buttons stacked horizontally or vertically, depending on the selected orientation.

You can also set the buttons to wrap to multiple lines or display all of them in one line.

This article provides details about layout settings. 

Color

See this guide for more information about changing colors.

Typography

Typography settings allow you to change a button’s font size, appearance, line height, letter casing, and spacing

Get more details about changing typography settings.

Dimensions

Dimension controls are used to control how groups of buttons are placed alongside one another, by changing the values for padding, margin, and other dimensions. Click the 3-dot icon in the top right corner in the Dimensions settings panel and click ‘Reset all’ to rest all the changes you made in the Dimensions settings.

Learn more about dimension controls.

Border

Border settings provide options to control the width and radius on each side of the button.

Learn more about border settings.

For individual button

Styles settings

You can change the style of the individual button.

Width settings

Each button can have its own width setting inside the buttons block based on a % value.

Advanced settings

You can add a Link rel attribute to each button in the block. This is a more advanced feature that enables to control the button link’s rel attribute, The rel attribute defines the relationship between a linked resource and the button. Eg: for rel attributes are nofollow, external, stylesheet, pingback, preload, prefetch, prev etc

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 an individual button. Then, you’ll be able to link directly to that button on 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.

Based on which style you choose for the button block, WordPress automatically adds a CSS class to that button block. You can find the class in the Advanced settings panel under Additional CSS class(es). You can also add additional classes with spaces.