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.
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.
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.
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.
Add a text label for your button. For eg: Get Started or Buy Now..
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.)
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.
Icon Font Library
Select the icon font from the dropdown. Choose from FontAwesome or Icons Mind.
Select the icon to be added on the page.
Set the position of your icon. You can keep the icon before or after the button text.
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)
Use the slider to control the size of the icon. You can also insert the value directly. (The value is in pixels.)
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.
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
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