How to Create a Button in WordPress
If you’re looking for a way to quickly grab the attention of your site visitors and get them to perform a specific action, there’s no better way to do that than to use the help of a button. No matter if you want your visitors to buy a product, get them to subscribe to a newsletter, sign up for an email list, or read more info about your brand, products, or services, buttons will help you achieve that goal, and then some. If you can adjust their color, shape, and size, and other attributes to match the overall design of your site, buttons can easily become one of the most useful and engaging elements you can add to your pages.
And so, we’ve decided to help you learn how to create and design a button in WordPress using the Button widget available in our very own Qi Addons for Elementor plugin. You can use this flexible widget to do anything from creating a simple download/subscribe button to designing a converting CTA. So, without further ado, let’s see how you can do this. We will show you how to add a button using this widget from scratch, and then demonstrate how you can create and stylize three different button types, so make sure to keep reading.
Creating a Button in WordPress With the Qi Addons for Elementor Plugin
Packed with 60 different custom widgets, the Qi Addons for Elementor plugin allows you to add all sorts of practical and engaging elements to your WordPress pages that can accommodate anything from online shops and blogs to creative portfolios and agencies. Among its list of widgets, you will also find a Button widget. Coming with all sorts of versatile customization and stylization options, this widget will help you create and display any kind of button on your site – from filled, outlined, and textual to small, colorful, and icon-based.
In this step-by-step tutorial, we will present you with most of the Button widget’s available options and show you three different button designs you can make using these options.
If you prefer to watch videos over reading, you can also check out the video on the same subject by clicking the link below.
So, here goes:
Once you access the backend of your page/post, you should search for the Button widget in the Elementor sidebar. You will be able to recognize the Qi Addons Button widget by our signature red color.
You should drag this widget over to the right side of the screen. Once you do so, you will instantly be able to see how the button widget looks by default.
You should note that we’ve also added some text into each of the three columns (that we will be using to showcase three different buttons) using the Qi Addon for Elementor’s Section Title widget, just to show you what the button can look like when paired with some text.
Now, the first thing you will be able to change using the General options on the left is the button Layout. You can pick from three different layout styles here – Filled, Outlined, and Textual. Since we planned to show you a button example using each one of the available layout types, the first one we will be showing is the Filled layout type:
The next option will allow you to pick the button type – Standard, With Inner Border, and Icon Boxed (this is the one we will be using for our button).
Next, you will get to use the option called Enable Button Text Underline. As its name suggests, by switching to Yes, your button will get an underline underneath the button text. However, for this particular button, we will choose No.
The next available option allows you to pick the size of your button. You will be able to choose from Normal, Small, Large, and Normal Full Width. We decided to stick with Normal for our first example.
You can use the Button Text option to change the text appearing in your button. We’ve replaced ours so that it says “View More”:
Right below, you can insert the Button Link. This can be done either by pasting your URL or typing it in. We’ve only set a hashtag as a placeholder to demonstrate what the button link looks like, but you should make sure to insert your own URL here.
Now, the following set of options can be used to customize your button icon.
You can either add your desired icon from the icon library (where you will be able to choose from several different icon packs) or upload an SVG (which is what we’ll do for our example).
Hit the Insert Media button once you’ve selected your icon.
After this, you will also be able to set the Icon Position. This option is set to Right by default (this is also what we chose), but you can change it to appear Left if you’d like.
Next, you can enable the Icon Side Border, an option that separates the icon from the button text. Like this:
The Style tab will allow you to style the look of your button widget in more detail.
The first option you will find in the Style section is Typography. It comes with a set of different options that will allow you to fully adjust the typography of your button text. You will be able to pick things like font Family and font Size, set the font Weight, use Transform and Style options, and more.
Next, you will get to use two different switches – Normal and Hover. The Normal switch has the options for setting the button style when displayed normally, while the Hover switch is used for adjusting the style when the button is hovered over.
We will be exploring the options under the Normal switch first.
The Text Color option lets you pick the color of the button text. You can either pick your color using the slider or by entering a hex code, which is what we did (the hex code we used is #ee581d).
Afterward, you can also change the button Background Color. Once again, you can do this by using the color picker or by adding the hex code. We’ve added a hex code #ffcfc3 for our background color.
You can also set the Border Color, but you should keep in mind that you also need to set the Border Width for your border color to be visible.
We are going to set the Border Width of 2 pixels for a brief moment just to show you what this can look like:
Also, if you want to enter different border widths for different button sides, you should delink all the values and then you can enter different values for each field.
We didn’t want to use the border for our button, so we left these fields blank in the end.
Moving on to the options under the Hover switch – there’s the Text Hover Color which you can use to make your text appear in a different color once it’s hovered over.
Keep in mind that the text color and icon color will change simultaneously, but if you want, you will be able to change the icon color in the Icon Style settings (more on that later).
Next, the Background Hover Color can be used to make the background change once you hover over your button. The same goes for the Border Hover Color option.
One option that differs from the Normal switch is Reveal Background. If you want to use this option, you need to set a different background hover color compared to the normal background color. You can then choose whether the color will be revealed horizontally or vertically. We don’t plan to use this option for our button, so we switched this option back to None.
The next option is the Border Radius which you can use to round out the edges of your button so that its corners don’t appear sharp. The button has a small radius by default already, but if you want to increase it, you can enter the values into the fields. In case you want to have a rectangular button, enter 0px into each field (this is what we’ve set for ours).
The button Padding option will affect the button space around the content. By increasing the values, the button will keep growing. You can delink the values here if you don’t want to have the same padding on each side. We’ve done this and set different values for each side (17 px at the top, 35px for the right side, 17 at the bottom, and 35px for the left side).
In the Icon Style section, there is a separate set of options related to the style of your icon.
First, you can change the Icon Size of your button icon. You can either use the slider or enter a desired value into the field.
Next, you will be able to use another set of switches related to the Normal and Hover display. In Normal options, there’s the Icon Color. This is what you will be able to use to change the color of your icon so that it looks different from the text color. You can also change the icon background color if you want.
In the Hover switch, you will be able to use the options Icon Background Hover Color and Move Icon.
The former option will allow you to select the background color of your icon on hover (it will only become visible once you hover over your icon).
As for the Move Icon option, it will allow you to create an animation effect of sorts, making the icon move when you hover over it.
There are several different effects you can use here (Horizontal Short, Horizontal, Vertical, etc.).
Moving on, there’s the Icon Margin option that allows you to create more space all around your icon.
We’ve delinked the fields and set 2px at the top (and left the rest at 0px) to have the icon line up with the text.
You can also change the Icon Side Border Color (we’ve added a hex code #ee581d to match the text and icon colors) and the Icon Side Border Hover Color (which will become visible on hover only).
Underneath, there’s the Icon Side Border Height option that lets you change the height of the border. We’ve set 40px for ours.
Finally, the icon Side Border Width option will allow you to make the line appear narrower or thicker. We’ve set 1 pixel for ours, making it appear narrower.
Next is the Button Inner Border Style section. This section currently appears empty as we are using the Boxed button type. But if you use the Inner Border style instead, you’d be able to see and use the options in this section. The same goes for the Underline Style section.
Do not fret, however, as we will show you both sets of options using the two other button examples.
First things first, we’ve added another button widget and placed it in the middle column on our page. Then, we’ve picked an Outlined layout for our button. Also, this time, we’ve chosen the Inner Border button type.
We’ve gone through most of the options located here already, so there’s really no need to do so again. This is just to show you another example of what you can do to get different button looks once you use a different mix of settings. Plus, we will be able to show you the options we haven’t been able to cover so far with the first button type.
We’ve changed the button text again (so that it says View More), and set a hashtag as a placeholder for our link.
We’ve chosen to skip the icon for this button example. So, in the Style tab, we’ve changed the button text color (#000000 for black) and the Border Color (we’ve used the color black again).
In the Hover section, we’ve set the Background Hover Color to pure white (using a hex code #FFFFFF) so that there’s no change in color on hover.
We’ve also set the Border Width to 1px to make our border appear thinner. You should note that this option only takes care of the outer border, but there is a separate set of options for the inner border (we will also talk about them a bit later).
Our button has rounded corners, so to change that, we’ve used the Border Radius option and entered 0px for each field to make them pointy. We’ve also changed the Padding by delinking the values and entering 16px at the top, 46 on the right, 16 at the bottom, and 46 on the left.
We have skipped the Icon Style section as this button doesn’t have an icon.
So, it’s finally time to move on to the Inner Border Style section.
Here you will be able to set the Inner Border Color to match with the outer border one (we’ve set ours to black by entering the hex code #000000):
There are also some additional Hover settings here, allowing you to set the Inner Border Hover Color and use the Hover option to give an animation effect to your inner border.
We’ve used the effect called Remove To Two Points:
The Inner Border Offset option will allow you to draw the inner border further inward. We’ve chosen the default setting here.
Finally, the Inner Border Width option can be used to specifically set the width of your inner border. We’ve chosen to leave ours at 1px.
And that concludes the settings we’ve used for creating and styling the second button. Here’s the final result:
Finally, it’s time to create our third button example – the Textual button.
To create this button type, drag over the button widget to the third column on your page (like we did) and choose the Textual Layout in the Content tab (General settings).
We’ve also enabled the button text underline option for this one to show you the settings related to the underline style later.
Then, we’ve changed the button text and added a hashtag for our placeholder for the link. We’ve also added an icon for this button.
Using the Style tab, we’ve decided to change the button text color in the Normal switch, making it appear black (using the hex code #000000).
We’ve also opened the Icon Style settings and changed the icon size to 6px.
Next, we’ve changed the Icon Margin settings by delinking the fields and entering 2px at the top and 10px on the left.
Now, we can finally head over to the last options section – Underline Style.
Once again, there is a pair of switches here – Normal and Hover. In Normal, you will be able to use the Underline Color, an option that changes the color of the line under the text. We’ve used a hex code to set the dark gray shade (#5f5f5f):
Next, the Underline Width option will let you adjust the width of your underline.
If your underline ends up not covering the entire width of the button text, you can also use the option called Underline Alignment and change your alignment from Right to Left (and vice versa), or set it to the Center.
The settings under the Hover switch allow you to set the Underline Hover Color and set a separate Underline Hover Width (so that the width of the underline differs once you hover over it).
The last option available in these settings is the Enable Hover Underline Draw. This option is set to No by default, but if you switch it to Yes, you get a neat effect. We’ve increased the underline width for a moment so that you can see this effect a bit better (we’ve switched the settings back to default ones right after):
By using the Underline Offset option, you can move the underline closer or further away from the button text. We’ve set 3px for ours.
Last but not least, the Underline Thickness will allow you to make the line thicker, but we’ve left ours at default.
Finally, make sure to Publish your work to save your changes.
And here’s the final result with all three button types:
Wrapping Things Up
As you can see from all the different button examples and options we presented in our tutorial, there’s no shortage of things you can do using Qi Addons for Elementor’s versatile Button widget. You will be able to easily change button colors and typography, add and style button icons and borders, play around with various hover animations, and much more. Of course, which button style and type you will go for depends entirely on your specific requirements. Either way, if you end up using the Button widget, you can rest assured that you will be able to create beautiful, practical, and highly engaging buttons in no time.
