Blocks » Buttons Block

Use the Buttons block to prompt visitors to take action with a button-style link. Your button can link to other pages on your site or an external page. It’s great for calling attention to the most important thing you want your visitors to do.

Table of Contents

1. Video Tutorial
2. Add the Buttons Block
3. Block Toolbar
   1. Linking a Button
4. Block Settings
   1. Styles
   2. Width Settings
   3. Color Settings
   4. Typography
   5. Padding Settings
   6. Border Radius
   7. Orientation
   8. Advanced

Video Tutorial

↑ Table of Contents ↑

Add the Buttons Block

To add the Buttons block, click on the + Block Inserter icon and search for “buttons”. Click it to add the block to the post or page. Once you add your first button, you can type what you’d like the button to say.

Adding a buttons block (Click to enlarge)

💡

Using your keyboard, you can also type /buttons on a new line and press Enter to quickly add a new Buttons block.

Add a Buttons block with slash inserter

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

There are two levels to the Buttons block:

• The overall Buttons block contains your button(s). This is known as the parent block.
• The individual Button blocks within the parent Buttons block.

When you click on the parent Buttons block, a toolbar of options will appear:

The parent Buttons block toolbar

These options are:

• Change Buttons block to another type of block
• Drag block handle to change the block position
• Move up and down
• Change item’s justification (left, center, right, or equal space between)
• Change vertical alignment
• Change width (wide or full width if supported by the theme)
• Other toolbar options

Individual Button blocks offer the following options in their toolbar:

The individual Button block toolbar

These options are:

• Select parent Buttons block
• Button styles (more on this below)
• Drag block handle
• Move up (left) and down (right)
• Change item’s justification (left, center, right, or equal space between)
• Change vertical alignment (top, middle, or bottom)
• Change width (wide or full width if supported by the theme)
• Link
• Bold, Italics, and more text formatting options
• Other toolbar options

Individual Button blocks toolbar

Linking a Button

To add a link to your button, click on the Link icon that shows in the floating toolbar that appears when you click on the block. The icon looks like an actual link you would find in a metal chain. You will be able to paste your link or search the existing pages and posts of your site.

By default, links will open in the same tab unless you choose to set the link to open in a new tab.

Linking a button (Click to enlarge)

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

Click on the ⚙️ icon to open the block settings

Styles

In the Styles options, you can set the button to be filled with a color (Fill) or have a solid border (Outline).

Width Settings

The width settings allow you to define the width of each button in percentage terms.

Changing buttons width (Click to enlarge)

Color Settings

You can choose the text and background colors for your buttons.

Select colors that will make the button stand out, and make sure to find a nice contrast for readability purposes. Accessibility parameters are built into the new editor to warn you when the text may become illegible for persons with reading impairments.

Typography

The Typography settings contain options to control the size of the text displayed on your button.

Padding Settings

Padding is empty space within the border of a block, which can bring clarity to your content and adjust the balance of the page’s layout. You can find the option to set up the padding of a specific button under the Dimensions section of your block’s sidebar settings. You can set up a uniform value for all four borders or you can set up different values for the upper-down and sideways paddings.

Type a value in the padding settings to add the same padding around the four borders of your button.

If you click the unlink icon, you can add different padding values for the upper-down and lateral borders of your button.

Border Radius

The border radius option allows you to give your buttons a more rounded appearance. Setting this to 0 means the button has sharp edges.

Orientation

When you first add multiple buttons to the parent Buttons block, they will be displayed horizontally (i.e. next to each other.) You can display the buttons vertically (i.e., stacked in a column) using the Orientation setting in the sidebar of the parent Buttons block.

By turning on the Allow to wrap to multiple lines setting, the buttons will move to the next line when there isn’t enough space on a mobile device (recommended). With this setting off, all the buttons will stay on the same line no matter what.

Transform buttons

Advanced

Link rel controls the button link’s rel attribute, for adding nofollow amongst other things.

The HTML anchor field can be used to create a page jump to your button.

Use Additional CSS class(es) to write custom CSS to style the block. Learn more.

Versatile plans and pricing

• Free

  

  Best for students

• Personal

  

  Best for hobbyists

• Premium

  

  Best for freelancers

• Business

  

  Best for small businesses

Choose a plan