Button Element

Last Updated on

The Button element allows you to display buttons in various styles, sizes, and colors. It also offers many features like a custom link, icon, animated hover effect, etc. There are many styles and effects that allow you to create different buttons. You can change the typography of the text, change the background, border radius, hover colors and other settings.

Common Uses:

  • Simple Links
  • Block links
  • Animated hover links
  • Download Button links
  • Sign up button links
  • Redirection links
  • Call to action links
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Button, you need to look for it in the Elementor knowledgebase

In this article


Displaying a Button Element

To add a Button element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Button”.

4
Drag and drop the Button element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Text Adds text displayed inside the Button.
Choose Icon Adds icon displayed inside the Button.
Link Sets a custom link for the Button.
Hover Effects Sets a custom animated effect upon hover.

Style

SettingDescription
Width Sets the width of the Button.
Height Sets the height of the Button.
Padding Sets a padding for the Button.
Alignment Aligns the Button on a page.
Background Color Sets a classic or gradient background color for the Button.
Border Type Sets a type of border for the Button.
Border Radius Sets a custom radius for the border.
Typography Lets you change and style everything related to the Button text.
Icon Lets you change and style everything related to the icon inside the Button.

Creating a Gradient Button

To create the following button, follow the steps below:

1
Follow the steps in Displaying a Button Element section to add the Button to your page.
2
Configure the settings like shown below:

Style

SettingDescription
Width 200px
Height 50px
Background Color Type Gradient
Background Color #3edbd9
Location 0
Second Color #5841b8
Location 100
Type Linear
Angle 15
Border Type None
Border Radius 50px All
Text Color #ffffff
3
Configure the rest of settings as you desire and publish or update the page.

Creating an Animated Button With Icon

To create the following button, follow the steps below:

1
Follow the steps in Displaying a Button Element section to add the Button to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Choose Icon Pick your desired icon.
Hover Effects Pick your desired hover effect.

Style

Click on Hover.

SettingDescription
Background Color Set a background color which will display upon hover.
3
Configure the rest of settings as you desire and publish or update the page.

Tracking “Button onClick” Event

Tracking the “Button onClick” event is useful for Facebook Pixel, Google Analytics or Google Tag Manager.

x
Note: It’s assumed that you are already familiar with JavaScript, and using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements and Inserting Custom JavaScript Codes articles.

Follow the steps bellow to track Button onClick events:

1
Using the browser developer tool, inspect your Button element and get it’s ID.

custom javascript

2
From the WordPress left menu, go to Appearance > Customizer > Custom JS.
3
Paste the following codes:

document.addEventListener("DOMContentLoaded", function(event) { 
	jQuery('#My_Button a').click(function(){ 
	// tracking code here
	// for example Facebook Pixel: 	
	fbq('track','AddToCart'); 
}); 
}); 

4
Click on the Save Settings button.

Creating a “Download PDF” Button

To create a button which will download PDF document on click, follow the steps below:

1
Add a Text Editor element to your page.
2
Upload your PDF through the Text Editor element.

3
Publish the page.
4
Go to the live page and get the URL link pointing to the PDF.
5
Now, in another page, add a Button element and set the link to the URL.

 


Responsive Options

You can choose to have different settings on different screen sizes for some of the Button element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket