TP Buttons

< All Topics

Buttons are an integral part of any website. It is one of the most simple UI elements but a very important one. A website is incomplete without it. The main purpose of the buttons is to inspire the visitor to take action such as buying a product or a service, sending a message, etc.

Pro tip
 Always label the buttons with the actions they are required to perform. For eg: If you want your visitors to buy a product, the button should say “Buy This Product” and not a generic label “Click Here”. Also, size your buttons properly to improve conversions. They should not be too big or too small.

How to use the Button Widget of The Plus Addons For Elementor

The Button widget comes with various creative styles to create awesome buttons. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the Buttons widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Content Setting for the Buttons Widget.

Content

Button Style

We have provided you with a total of 23 unique button styles to choose from. These styles are very creative and modern. Select any one from the dropdown.

Text

Add a text label for your button. For eg: Get Started or Buy Now..

Link

Add a link to your button. Just type in the name of your page or post and select it. It will automatically set the link for you. Or, you can directly add a custom link by typing inside the field. If you want a link to open in a new window, click the gear icon and select Open in new window. You can also add a nofollow tag to your link by selecting Add nofollow. (Nofollow links are the ones which get ignored by the Search Engine Crawlers. They don’t carry any value and don’t help with your search engine rankings.)

Layout

Alignment

Click the respective icons to set the alignment of your button to left, right or center. You can set the button alignment individually for desktop, tablet, or mobile by clicking the desktop icon.

Layout Settings for the Buttons Widget.

Icon Settings

Icon Font Library

Select the icon font from the dropdown. Choose from FontAwesome or Icons Mind.

Select Icon

Select the icon to be added on the page.

Icon Position

Set the position of your icon. You can keep the icon before or after the button text.

Icon Spacing

Use the slider to control the amount of spacing between the text and the icon. You can also insert the value directly. (The value is in pixels)

Icon Size

Use the slider to control the size of the icon. You can also insert the value directly. (The value is in pixels.)

Icon Setting for the Buttons Widget.

Extras

Button ID

Add a Button ID if you wish to do some advanced CSS coding. Please make sure the ID is unique and is not used elsewhere on the page. This field allows <code>A-z, 0-9</code> & underscore chars without spaces.

2. Style

Typography and Cosmetics

Set your your typography options by clicking the edit icon. You can set your font family, font weight, font size, and other related cosmetic options. You can also set the padding.

For more detailed tutorial on how to use these options, check our Style Tab Tutorial

Special

Set the animations and some advanced effects such as Magic Scroll, Tool Tip, Mouse Move Parallax, etc. These are common animation options across all our widgets, so we have written a detailed tutorial explaining the same.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?