A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

4 Easy Ways to Create Button in WordPress

4 Easy Ways to Create WordPress Buttons

Adding buttons in WordPress wasn’t always as simple as one would expect to of a platform that is otherwise so user-friendly. Many WordPress users find themselves puzzled when they face the need for buttons on their WordPress website. But there is really nothing to worry about, adding a button doesn’t require any special skill or knowledge, and we will share four different, simple ways to add buttons to any page on your website.

In this article you will learn the following:

Why Buttons Are Useful

Every button is a specific call to action. Following this logic, you can use a button whenever you want to direct your users’ behavior towards a specific goal – to read some special part of an article, take them to fill in a form, send them to an external website, landing page or another page of your site, or any other URL, etc. Buttons scream for clicking, especially when they are styled and smartly distributed. Apart from thinking about their function, you should also carefully consider your WordPress buttons design. They can significantly improve and enrich user experience while also helping you achieve your goal.

How to Add a Button in Elementor

If for any reason you prefer working with Elementor, you don’t have to change your habits, you can easily add a button with Elementor too. This method will probably be every beginner’s first choice. Let’s see how it is done.

After opening your post in Elementor, click on the plus icon to add a new element.

Then enter “button” in the search field in the menu on the left, and click on the button option when it appears in the search result.

Elementor button

You will notice several options for button customization:

Type – this option lets you select the type of button you want to create and sets the button color accordingly. If it is na info button, it will be blue. If it is a warning button it will be orange and so on.

Text – this is where you enter the text you want to be displayed on the button.

Link – this is where you insert the URL that you want to open upon clicking on the button.

Size – you can select between small, medium, large, and extra small/large sizes for your button.

Icon – if you want to add an icon to make the button more attractive, click here and you will be able to choose from a variety of premade icons.

Icon position – see if the icon looks better before or after the text on the button.

Icon spacing – you can also set the distance between the icon and the text on the button.

Button content

You can modify your button using options from Style tab.

Button style

How to Add a Button with QI Addons for Elementor

Qi Addons For Elementor plugin

QI Addons for Elementor is an incredibly versatile and easy-to-use plugin that comes with 60 free widgets and includes the button widget too. It is a very stylish solution for adding buttons to your website and you can choose whether you want to add the button widget or info button widget to your page right from the start.

Button Widget

After you choose the button you want to create, you can start customizing as per your needs. You have two basic settings for customization Content and Style and there are also Advanced options that let you refine even more details. Nevertheless, in most cases, you’ll find the first two settings quite enough to create a beautiful and effective button. Let’s start with content settings first.

QI Button Settings

The Content settings include settings that allow you to define the purpose of the button – here is where you enter the text that will show up on the button, choose the type of button layout, set the link for the URL you want the button to lead to and set whether you want the new URL to open in the same or new window. You also have the option to choose the size and the type of the button here.

QI Button General settins

The next interesting option is the Icon option that allows you to add an icon to your button, either from the icon library or by uploading it from your computer.

QI Button Icon

The icon library has a rich choice of icons to offer.

Choose icon

Nevertheless, if you already have an icon prepared, you can simply upload it from your computer and then continue setting its position and border.

Button examle

You have more options for refining the look of your button and the icon on it at your disposal. You can adjust all the details like the text color, border width, radius and color, background color, and padding.

Button Style tab

This is how the result looks in our case:

Button examle live

Button Info Widget

As we mentioned before, QI Addons lets you choose between adding buttons and info buttons. If you opt for the info button, the procedure of setting it is practically the same but with one significant distinction. The info button Content settings include an option for setting the button subtext. This is the text that will show up below the main text on the button and you can use it to describe more closely the purpose of the button.

QI Button Text

You can also customize the font and color of the subtext. Below you can see how the result looks like on our page:

Button text examle

How to Add a Button with a Plugin

MaxButton is one of the most popular plugins used for adding buttons in WordPress. It is user-friendly and lets you add a button in a simple way, though not as quickly as you may imagine. You start just like with any other plugin, by installing and activating it.

Maxbutton plugin

After you installed and activated the plugin, in the WordPress dashboard menu on the left you will see the newly added option for MaxButtons. Click on Add New to go to the settings page where you can create a new button.

Add new MaxButton

You will find a variety of settings and options available for styling your button on this page. Make sure to enter the button name and text and of course the URL of the page you want to open when the button is clicked on. After deciding about these basic settings, you can go on to refine the look of your button.

Button name and text

Scroll down to see all the options that you can adjust. You will see settings for adjusting the button border.

Button border

Notice that you can always take a look at the preview of the button in the popup in the upper right corner of the settings page. As you scroll down, more options will appear, you can easily set the background color of your button as well as text-shadow if you want to have it.

Set button background color

Don’t worry if you miss making some adjustments here, you will be able to change all the details again while you insert the button on the dedicated post/page. So, when you are satisfied with the look of your button, don’t forget to click Save.

Save button

Now comes the part where you insert the button into the article. Go to the new post or edit post page from your WP dashboard menu. You will notice the new option for adding buttons. Click on it and choose the button you previously created.

Option for adding buttons

If you created more than one button version, you will see all of them here. Pick the one you want to insert in the specified article.

Pick button you want to insert

And this is how the result looks like in our case.

Button example

There are many more options for button customization available with this plugin. We wanted to cover the basic steps, and then when you feel confident enough you can continue exploring all the possibilities that come with this tool. One thing is sure, it is easy to use and you will quickly master it.

Another way to add buttons in Elementor is to copy the shortcode in the shortcode widget, but that is surely not the best solution for Elementor users.

Add MaxButton in Elementor

How to Add a Button in Gutenberg Editor

Adding a button with Gutenberg editor is incredibly easy. Though it doesn’t offer as many options as the plugin, if you want a simple and elegant solution, this is a good choice.

So, the first thing to do is to click on the plus icon to add a block. Then look for the Button block.

Gutenberg button

When you click on the button icon, a button with a menu above will appear. Simply enter the text you wish to appear on the button in the button field and above you can set the link, choose one of the three alignments that are available to determine the positioning of the button, set the style, color, font of the button and some more details.

Edit Gutenberg button

Bellow you can see the button we created this way.

Gutenberg button example

Feel free to investigate all the available options and enjoy the simplicity of the procedure.

The Max plugin can also be used for adding buttons in Gutenberg. It comes with the button block included and the procedure is also very simple. Just click on the MaxButtons block option and the button filed will show for you to start customizing it.

Gutenberg MaxButton

In Conclusion

As you can see, adding a button in WordPress is not rocket science. All the four methods we described here are easy and comfortable for beginners. The choice depends on how much customization you need and how much time and effort you want to invest in creating a button. If you need more guidance on this topic, let us know in the comment section!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply