5 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:
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.
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.
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.
You can modify your button using options from Style tab.
Qi Addons for Elementor is an incredibly versatile and easy-to-use plugin that comes with 60 free and 40+ premium 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, info button widget or amazing premium button 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.
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.
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.
The icon library has a rich choice of icons to offer.
Nevertheless, if you already have an icon prepared, you can simply upload it from your computer and then continue setting its position and border.
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.
This is how the result looks in our case:
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.
You can also customize the font and color of the subtext. Below you can see how the result looks like on our page:
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.
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.
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.
Scroll down to see all the options that you can adjust. You will see settings for adjusting the 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.
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.
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.
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.
And this is how the result looks like in our case.
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.
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.
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.
Bellow you can see the button we created this way.
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.
If the default button in Gutenberg is not fulfilling your needs, you can then consider the Ultimate Blocks plugin.
The plugin comes with an Improved Button block that comes with some very good customization options.
It lets you choose the button size from 4 different options: Small, Medium, Large, and Extra Large.
Moreover, you can also choose to make the buttons rounded or squared. Lastly, you can also add an icon to your button to make it look more captivating.
To use the Improved Button block in Gutenberg, all you have to do is install the Ultimate Blocks plugin and click on the (+) icon and search for ‘Button’.
Once the block is added, you can then customize it according to your needs by changing its colors, size, icon, and style.
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!
