Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

How to add button in WordPress block editor: Best Way

how to add button in wordpress block editor

Table ofContents

Do you want to find out how to add button in WordPress block editor?

When it comes to enhancing your WordPress content, adding buttons can be a game-changer. 

Whether you want to direct your readers to another page or encourage them to take a specific action, buttons are a powerful tool. In this blog, we’ll walk you through the simple steps of adding buttons in the WordPress block editor. From navigating to the right place to customizing the look and feel, we’ve got you covered.

So, let’s dive in and make your content more engaging and interactive with eye-catching buttons!

Why do we need buttons on a WordPress site?

There are many reasons why buttons are important on a WordPress site. Buttons are an important part of a website’s look and usefulness. They help users move between pages and make it easier for them to do important things like download content or sign up for newsletters.

 They act as visual cues that tell users what to do and can have a big effect on interest and sales.

To make the main call to action on a page stand out, like “Apply” or “Request Information,” buttons are necessary. They are also essential for good web design because they help guide customer behavior and boost interest.

So, smartly using buttons is important for making calls to action on a WordPress site work better.

Well then without further ado let’s add the button to the WordPress site.

How to add button in WordPress block editor?

There are 3 main different ways to add a button in the WordPress block editor.

  1. Using the Buttons block
  2. Using a plugin
  3. Using CSS with the help of a classic text editor.

Let’s learn all of them step by step.

How to add a button in WordPress using a button block?

The Button block is a built-in block in the WordPress block editor that allows you to add one or more buttons to your page or post. It has been available since WordPress 5.4, when the button block was deprecated.

To use the Button block in WordPress Gutenberg to add a button, do the following:

1. Open the Gutenberg editor and go to the page or post where you want to add the button.

2. Move your mouse over the “Add Block” button, which is the “+”  sign in the top left corner of the block editor.

how to add button in WordPress block editor

3. Now type “Buttons” on the search block search bar or you can simply scroll down to the design section you will find the button block.

4. After selecting the button block, a new button will appear. Here, you can choose how your button will fit with the text, put the text that will show up on the button, and change other settings like the link, style, and CSS class from the block tab at the right corner column.

5. You can change how the button looks by using the choices. These include alignment, justifications, text alignment, bold, italic, strikethrough, link, font color, and background color.

6. Click “Add to Block” when you’re happy with the choices to add the button to your content.

7. To put the button where you want it, click and drag the block to the desired spot in the text.

8. Click the “Add Block” button again and do steps 3–7 again for each button you want to add.

Alternatively, you can use the keyboard shortcut “/buttons” to quickly insert a Buttons block. Once inserted, you can customize the text, link, and style for each button within the block.

Well, adding a button using a block editor is not so tough, now we will learn another method using a plugin.

How to add a button in WordPress using a plugin?

To add a button in WordPress Gutenberg using a plugin, you can follow these steps:

Go to the WordPress dashboard and select Plugin -> Add New Plugins.

Now type button block on the plugin search and you will get a plugin name called Button Block – Get Fully Customizable & multi-functional buttons.

Install and activate the plugin.

You will get a prompt to confirm the email to opt in Button block plugin.

Then, go to the Gutenberg editor and find the “Widgets” block group. This is where you can add the “Button Block.” This will let you add a button to your text.

Once you’ve added the Button Block, you can change the text, URL, and style of the button right in the editor. You can also change the block settings in the settings menu on the right to make the button look even better.

If you follow these steps and use the right Button Block plugin, it will be easy to add and change buttons in the WordPress Gutenberg editor.

Great, so far you can add a button using a plugin and the blocks in WordPress.

But there is another way of using CSS code to add buttons. For that, we need the classic text editor.

How to add a button in WordPress using CSS?

If you want to use the classic editor in WordPress, you can follow how to disable block editor in WordPress.

Once you are in the classic editor, switch to text view by clicking the “Text” tab in your post editor.

Add class=”button” to the <a> tag of the link where you want to put the button. 

<p>A link styled as a button:</p>

<a class=”button”  href=”https://bdthemes.com” target=”_blank”>BDThemes</a>

You can change how the button looks by adding a CSS style to the link in text view.

For that simply go to your theme customize option and open Additional CSS.

Then add the CSS code below with button class and hit the publish button and check the button in the preview of your text editor.

.button {

  background-color: #f44336;

  color: red;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;


Wrapping Up

Finally, this is the end. You just learn how to add button in WordPress block editor.

It wasn’t that hard to follow this walkthrough. So far you have learned three different ways which are very easy to follow. Also, you learn the need for buttons in WordPress.

Frequently Asked Questions

How do I add a button to my WordPress Elementor?

Navigate to your WordPress Dashboard.
Click on an existing post/page or create a new one.
Edit the post/page with Elementor.
In the Elementor editor, search for the Button widget in the content section.
Once you find the Button widget, you can customize it by adding/editing the button text, providing the URL link, and setting other options such as adding an icon, selecting the icon position, and adjusting the button’s style and size.

What are some common call-to-action buttons on WordPress sites?

Some examples of call-to-action buttons on a WordPress website include:
“Sign Up” Button: used to encourage visitors to register.
“Learn More” Button: used to direct visitors to additional information.
“Download Now” Button: used to prompt visitors to download.
“Get Started” Button: used to encourage visitors.
“Contact Us” Button: used to prompt visitors to reach out for more information.

Share this post to your social media

advanced divider
Picture of Kazi Riad
Kazi Riad
Hey I am Kazi Riad, a technical WordPress writer. Whose words solve many WordPress users' problems. Using WordPress since 2011, and knows all the ins and outs of WordPress eco systems. I'd love to narrate all the queries for WordPress Plugins and Themes. So let's unveil some mystery of WordPress with my writing.

Leave a Reply

Over 300,000+ Readers
Get fresh content from Bdthemes
Subscribe tonewsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.

No spam messages. Only high-quality information that you deserve.

Explore OurProduct

Table of Contents

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge