How To Create Custom Buttons In WordPress (Without Coding)
Buttons are one of the most effective ways to drive user attention. Have you ever wondered, “How to create those cool and sleek buttons easily, with absolutely no code to type?
In this tutorial, I will show you how to create high CTR call to action buttons you can use to:-
- Send users to a specific page
- Collect lead & Email through modal popup
- Get high CTR on affiliate links
- For adding more visually appealing elements to your landing pages.
Buttons are proven to have high CTR. If you have ever visited a conversion-optimized landing page, You may have seen buttons like these:
I use these buttons on some of my highest traffic generating blog posts & pages to ensure every visitor gets a chance to convert and see the best of my content. It also helps me earn more money through my affiliate links.
When you look into the picture, the orange button marked is an example of the button made with the MAXbuttons plugin. Here in this tutorial, you are going to go through the same step-by-step procedure, which will help you create buttons to show anywhere on your WordPress blog.
I will show you the easiest way of doing this, which requires zero codings and CSS customization at all.
In this tutorial, We are going to use the MAXButtons plugin. Here are a few reasons why you should use this one:
- The standalone plugin that supports cache for faster loading speed.
- Highly customizable, Free to use
- Easy to use yet powerful
- Comes with prebuilt link optimization resources
- Supports various themes
- Supports shortcode and inside editor shortcut
This plugin is the one I use here on BforBloggers. No other plugin is as powerful and easy to use as MAXButtons is.
That being said, Let’s get started.
Step 1: Install The MAXButtons WordPress Plugin
Maxbuttons is one powerful plugin that is used by beginners to pro users. You can create an impressive, highly customizable, and an unlimited number of buttons and show than anywhere on your WordPress blog using simple shortcodes. So, the very first thing you need to do is install and activate this plugin.
Step 2: Building A Button from Scratch
Head on to the MAXButtons menu from the sidebar of your WordPress dashboard. Click on the Add new button option. A new editor screen will open where you need to create and edit your button. Let me show you how it’s done.
1 – Enter a button name. Although this isn’t necessary, I recommend you to give each of your new buttons a name so that you can differentiate between them and easily find multiple buttons if you happen to create more than 10 of them. This is for internal use. Users won’t see it on the live site.
[Keep looking at the floating preview. It changes as you start editing your button. This will give you an idea of how it’s going to look on the live site exactly.]
2 – In the next field below the button name, enter the URL where you want to send a user when it clicks on it. This can be an affiliate link for promotion, a content upgrade, an email list opt-in form, or any page, etc. You can select if you want to add a nofollow attribute tag to your button link and if you want to open it in a new window. Internal and external, both of the links can be used.
3 – In the third field, you may add a button tooltip. A tooltip is shown when a user holds its cursor above the button. SO, It may be a good idea to do so as it will add more value. Enter a short description of what the user is going to see as soon as he/she clicks on it.
4 – In the text are, this is where your button tagline should be entered. As you can see in the image above, the text which will be shown on the live site should be short and as close to the point as possible. Keep it under 3 words if possible. Something like click here is better than please click this button.
5 – Other options include the text font family, size, and format. You can choose from available options, and in the image, I have used Georgia sized at 18 px with bold style. You can also change the text hover color to add an animation effect to your button. The hover color will activate as soon as a cursor comes above the button. You can also align the text if you want.
6 – After scrolling the first section, you will see the border customization option. In this section, you change the border of your button. There are two border options, one is for the normal border, and the other is for hover. The hover button should be different than the ideal border color.
There is also a border-style menu where you can select from different border styles. For example, I have used the double style in the image above. The default style is solid and looks uncool, so it’s better to change that.
7 – In the next section, You can customize the background color or the base color of your button. You should change this color to something viewers can relate to, for example, your WordPress theme‘s standard color. I like the orange color, so I have to change it to orange. You can choose any color from the color palette popup with ease.
Below that, there is also the background hover color. Change it if you wish to show your users a different color when they move their cursor over the button.
That’s it. The settings in the lower section are for advanced users who like to play with custom CSS. I assume you are a beginner so, please don’t touch those settings. Leave them as it is.
Step 3: Save & Preview
Now, The only thing you need to make your button go-live is:
- Click on the Save button.
- Copy the shortcode shown on the screen.
- Paste anywhere on your site.
The shortcode needs to be pasted in the visual editor and not in the text. Below is the same demo button I have demonstrated throughout this tutorial and in the images.
[maxbutton id=”8″]
It looks pretty good and optimized for high CTR. You can use the shortcode to show any button in the widget section and your footer section too. Use the text widget to do so.
Also, note that once you have created a button and saved it successfully, The button preview along with the shortcode assigned to it will immediately start to appear in the “buttons” section of the MAXButtons plugin menu.
I hope this tutorial was helpful. Share this post on Facebook and Twitter.