Button Block

The Button Block lets you add a custom button to prompt users and visitors to take a desired action …

WordPress Gutenberg Blocks – Button

WordPress Gutenberg - Button Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Button Block Description

The Button Block lets you add a custom button to prompt users and visitors to take a desired action.

Add Buttons to WordPress using the Button Block

(Add Buttons to WordPress using the Button Block)

How To Use The Button Block

To add a Button Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Button’ block (in Most Used or Layout Elements section), or
    • Add the ‘Button’ block in the Content Area.
  • Use the tools in the Button Block Editor or Block Settings section to edit and format your Button.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Button’ block …

'Add Block' Tool - Add Button Block

(‘Add Block’ Tool – Add Button Block)

Or, select a Button Block in the Content Area

Add a Button Block from the Content Area

(Add a Button Block from the Content Area)

After adding a Button Block, you can:

  • Add a button text,
  • Add a hyperlink to your button,
  • Edit and configure block settings,
  • Save, publish, or update your post or page.

Add your button text and a hyperlink

(Add your button text and a hyperlink)

How To Edit A Button Block

To edit a Button Block:

  • Click inside the Button Block to select it.
  • Use the Block Editor tools to:
    • Change your button text.
    • Format your button text (bold, italics, strikethrough).
    • Add a hyperlink to the button.
    • Change the alignment of your button.
  • Use the Block Settings to:
    • Change the style of your button.
    • Change the button background color.
    • Change the button text color.

You can change the alignment of your button in your content …

Edit button alignment

(Edit button alignment)

You can also edit your button styles and colors …

Edit button styles and colors

(Edit button styles and colors)

Remember to update and publish your post or page to save your settings.

How To Remove A Button Block

To delete or remove a button block:

  • Click inside the Button Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Button Block

(Remove a Button Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Button Blocks into Reusable Blocks.

Button Block Tools, Options & Settings

The Button Block includes tools, options, and settings for:

  • Button Block Editor
  • Button Block Settings

Button Block Editor

Button Block Editor

(Button Block Editor)

The Button Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Button Block – Additional Info’ section below.)
  • Align Button
    • Align button left
    • Align button center
    • Align button right
  • Format Button Text
    • Bold
    • Italics
    • Strikethrough
  • Add Button Hyperlink
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Button Block Editor

(Button Block Editor)

Button Block Settings

Button Block Settings

(Button Block Settings)

Button Block settings include:

  • Block description area
  • Button Styles
    • Rounded
    • Outlined
    • Squared
  • Color Settings
    • Background Color
    • Text Color
  • Advanced Settings
    • Additional CSS Class

Button Block Settings

(Button Block Settings)

Button Block – Additional Info

The Button Block cannot be converted into other block types.

Change Block Type - Button Block

(Change Block Type – Button Block)

Info

Notes:

  • Selecting ‘Change Block Type’ for the Button Block brings up the Block Styles menu.

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Button Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Button Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Button Block.