The new WordPress editor, Gutenberg, already has a button feature, allowing you to effortlessly add a button to the article you are writing. However, the button feature of WordPress is not really customizable. You can only change the button color as well as the text color. If you want to create a gradient button in WordPress to increase the click rate, this article will show you how.

We are going to use the MaxButtons plugin to create a global gradient button. The term “global” here refers to the use of the button. You can use a global button on any article or page on your website.

MaxButtons itself is a freemium plugin. You don’t need to upgrade to the pro version only to create a gradient button. Before getting started, make sure to install the plugin first. To do so, you can go Plugins -> Add New. Type “maxbuttons” on the search box and click the Install Now button to install it on your WordPress. Activate the plugin immediately once installed.

Once the plugin is installed and activated, you will see a new item called MaxButtons on the menu panel inside your WordPress dashboard. Hover your mouse over this item and select Add New.

You will be taken to the MaxButtons editor page. On the Basics section, give your button a name. You can also set the button text color, font style, button size (width and high) on this section. On the URL, Button Tooltip and Text fields, you can leave them empty. You can fill them in later on the WordPress editor when you want to use the button. But, if you want to fill them now, it’s up to you.

If you want to create a round button, you can go to the Border section and set the border radius (top left, top right, bottom left and bottom right) to 30 or higher. You can also change the border color on this section.

Here is the main step of this tutorial. To make your button has a gradient color, go to the Background section and enable the Use Gradient option. Set the first color (Start) and the second color (End).

If you want the background hover has the gradient color as well, simply set the first color and the second color on the Background hover option. MaxButtons itself only supports a horizontal gradient. You can set the gradient level by changing the value of Gradient stop on the Background section.

By default, your button alignment is set to left. Meaning that your button will appear on the left side within your article. If you want to change this default setting (maybe you want your button to appear on the center), you can go to the Container section and enable both the Use Container and Center the container options.

Don’t forget to click the Save button to save the button you have created. You can now use your button on your article.

How to use the button

Now it’s time to use the button you have just created. On the WordPress editor, click the plus button to add a new block. Look for MaxButtons Block and click on it.

To select an existing button, click the Select Button button on the Block Settings panel on the right side.

Select the button you have created on the appearing pop-up and click the Insert Button into Editor button to insert it.

Set the button text, link, and tooltip — respectively — on the Block Settings panel.

You can edit the buttons you have created in case there is something you want to change, like background color, text color, or font style. To do so, you can go to MaxButtons -> Buttons. Click the Edit link on the button you want to edit.