Skip to main content
University Communications and Marketing
Web Documentation

Button Block

Use Cases

The Buttons block is a nice way to include styled hyperlinks on a page or post. Effective in grabbing a reader’s attention at the end of paragraph or story, the Buttons block can be a good way to prompt users to dig deeper into a site and explore other relevant content. That said, it is important to be mindful of the placement of a Buttons block, as readers will typically expect to find them at the end of a thought. Placement elsewhere, such as the beginning or middle of a paragraph, can oftentimes come off as irregular to a user. See an example of the Buttons block below.

A screenshot of a webpage showing a button at the end of a section of paragraph text.
An example of a button at the end of a section of paragraph text.

Features

To add a button, click the “Add a block” button and choosing “Buttons” from the block list. Alternatively, the block can be found by using the “Search for a block” function. For more info on blocks and adding them to a WordPress site, see our documentation on blocks.

A GIF demonstrating the process previously described of adding a button block.

Once added, the Buttons block is easy to setup. Creators will simply need to provide a link and call to action.

A GIF demonstrating how to add text to a button block by clicking on the button block, and adding a hyperlink by clicking on the "link" icon.

Additional customization is also available through the block settings found on the right-hand side menu where the style of the block can be change.

A GIF demonstrating the configuration options available in the right sidebar while editing the button block.

Additional Functionalities

In some cases, the styling of the Buttons block is context-aware. For example, when a YouTube link is placed in the Buttons block’s URL field, it will stylize the button to display a “play” icon. This helps communicate to visitors of your site that the button leads to a video.

A GIF demonstrating how the button block turns into a "play" button when a YouTube link is inserted.

In a recent update of the Buttons block, it also now possible to add multiple buttons within a single block. This update also supports alternative stylings across each specific button (see example below).

A screenshot of 4 buttons underneath a section of paragraph text, each with different styling available through the advanced options for the block.

Need help?

Have questions? Feel free to reach out with any questions or concerns at go.ncsu.edu/ucomm-dev-request.