How to Add a Button Block to Your WordPress Website

Before we start talking about button blocks, if you don’t already know your way around the WordPress block editor, check out our overview. It will help you get acquainted with the various options for adding all types of blocks.

Why Add a Button Block to Your WordPress Website?

We like to start with why a particular element on your WordPress website is useful. You can easily hyperlink text (or images!) to another page on your website or to an external page, as we did in the first paragraph to direct you to our block editor overview blog post.

But sometimes, you want to make your reference to another page more obvious and visual. The button block allows you to add a button that performs the same function as hyperlinked text but to do it in a way that calls extra attention to it.

Buttons on your site help you visually direct visitors to actions you want them to take. Plus, buttons helps visitors more easily find what they’re looking for when they are ready to take that next step. Win-win!

Buttons are often used to send visitors to your calendar to set up and appointment, to direct visitors to a form that adds them to your mailing list, to make a purchase, or to perform a number of other actions.

 

How to Add a Button Block to Your WordPress Website

As always, there are menu and text options for inserting a button block.

To add a button block using your mouse, click on the “plus” icon on the top left of the screen while using the block editor to create a page or post. Then search or scroll to find the button icon.

If you prefer to keep your hands on the keyboard as much as possible, you can simply type /button in a new paragraph block and hit ‘enter.’ WordPress will convert that paragraph block into your button block.

How to Format Your Button Block

Each type of block has its own, block-specific toolbar, which appears directly above the block, for formatting that type of block. As long as the block is “active” (you’ve clicked on it; it’s the one your working in), the menu will be visible.

Add and Format the Button Text

You’ll see your cursor blinking in a shaded area that will expand to be your button. This is where you type the button instructions – what people are going to be doing when they click the button. The button text should be in the form of a command (i.e., start with a verb). For example:

• Join the mailing list
• Buy now
• Make an appointment
• Learn more

Once you’ve typed your command into the button, the block toolbar provides the options to format the text (e.g., italics, bold).

Add the Link to the Button

To add the link to the button, copy the link to the page you’re directing people to, then click on the link icon in the button block toolbar. A window appears, providing a space to paste in your link. After you paste in the link but before you navigate away from the window, use the toggle to tell WordPress whether or not you want the link to open in a new tab. (Hint: You probably do want it to open in a new tab.

Formatting the Button

Now that you’ve added the button text, formatted that text, and added the link, you can make some decisions about what the button looks like on your page.  To set the alignment of the button, click on the button block and click on your choice from the menu directly above the block. Your options are left, right, or center.

To change the appearance of the button, click on the button itself (not just in the block).  You’ll then use the button menu that appears on the top right, which gives you the following options:

• Style – Fill (solid color background) or Outline
• Color of the text
• Color of the background
• Border radius
• Width

For the color options, you can select from default colors or add a custom color to match your website. When you choose the two colors – for text and background – select a background color that will make the button stand out on your page but be sure the text color is readable on that background. There should be enough contrast between the two colors for easy reading.

At the End of the Day

It’s almost impossible for us to think of a website that doesn’t need a button block. When new visitors come to your site, you want them to know exactly what they need to do next. Button blocks help you direct visitors to the next step in their customer journey.