Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Create a Button in WordPress

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.

Premium Qi Addons

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:

Picking the Button Type and Creating a Filled Button

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.

Qi Button

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.

Default Qi Button

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:

Qi Button Layout

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).

Qi Button Type

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.

Qi Button Underline

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.

Qi Button Normal Size

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”:

Qi Button Text

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.

Qi Button Link

Now, the following set of options can be used to customize your button icon.

Qi 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).

Qi Button Upload Icon
Qi Button Upload Icon From Media

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.

Qi Button Icon Position

Next, you can enable the Icon Side Border, an option that separates the icon from the button text. Like this:

Qi Button Icon Side Border

Styling the Filled Button

The Style tab will allow you to style the look of your button widget in more detail.

Qi Button Style Options

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.

Qi Button Typography

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.

Qi Button Normal and Hover

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).

Qi Button Text Color

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.

Qi Button 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:

Qi Button Border Color and Width

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.

Qi Button Border Width

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.

Qi Button Text Hover Color

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.

Qi Button Background and Border Hover Color

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.

Qi Button Reveal Background

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).

Qi Button Border Radius

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).

Qi Button Padding

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.

Qi Button Icon Size

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.

Qi Button Icon Normal and Hover

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).

Qi Button Icon Background Hover Color

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.

Qi Button Move Icon

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.

Qi Button Icon Margin

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).

Qi Button Icon Side Border Color

Underneath, there’s the Icon Side Border Height option that lets you change the height of the border. We’ve set 40px for ours.

Qi Button Icon Side Border Height

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.

Qi Button Icon Side Border Width

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.

Qi Button Inner Border and Underline Style

Do not fret, however, as we will show you both sets of options using the two other button examples.

Creating and Styling the Outlined Button

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.

Qi Button Outlined

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.

Qi Button Text and 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).

Qi Button Outlined Text Color
Qi Button Outlined Border Color

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.

Qi Button Outlined Background Hover Color

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).

Qi Button Outlined Border Width

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.

Qi Button Outlined Border Radius and Padding

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):

Qi Button Outlined Inner Border Color

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.

Qi Button Inner Border Style

We’ve used the effect called Remove To Two Points:

Qi Button Hover Animation

The Inner Border Offset option will allow you to draw the inner border further inward. We’ve chosen the default setting here.

Qi Button Outlined Inner Border Offset

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.

Qi Button Outlined Inner Border Width

And that concludes the settings we’ve used for creating and styling the second button. Here’s the final result:

Qi Outlined Button Final Result

Creating and Styling the Textual Button

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.

Qi Button Textual
Qi Button Textual Preview

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.

Qi Button Textual Icon
Qi Button Textual Icon Preview

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).

Qi Button Textual Text Color

We’ve also opened the Icon Style settings and changed the icon size to 6px.

Qi Button Textual Icon Size
Qi Button Textual Icon Size Preview

Next, we’ve changed the Icon Margin settings by delinking the fields and entering 2px at the top and 10px on the left.

Qi Button Textual Icon Margin

Now, we can finally head over to the last options section – Underline Style.

Qi Button 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):

Qi-Button Underline Color

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.

Qi Button Underline Width and Alignment

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).

Qi Button Underline Hover Color and Width

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):

Qi Button Hover Underline Draw

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.

Qi Button Underline Offset
Qi Button Underline Offset Preview

Last but not least, the Underline Thickness will allow you to make the line thicker, but we’ve left ours at default.

Qi Button Underline Thickness

Finally, make sure to Publish your work to save your changes.

Publish Page

And here’s the final result with all three button types:

All Button Types Preview

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.

Post your comment

Comments0