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




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.


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. 

6. Edit the settings and Update the page.


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.


Shopping Cart Button

A very useful feature in the Button settings when you want to create a custom Add to Cart button on a page, so there is no need to show a product itself. To achieve this:

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 Raven “Button” element.

4. Drag and drop the Button element to your page.

5. A new dashboard on the left will open with the element’s settings. 

6. Enable the option Show as Add to cart button and select the product in the Product option which needs to be added to the cart.

7. Edit the settings and Update the page.


Creating a Gradient Button

To create the following button, follow the steps below:

1. Follow the steps from the first section in this article to add the Button to your page.

2. Configure the settings like shown below:

Style

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 an animated button, follow the steps below:

1. Follow the steps from the first section in this article to add the Button to your page.

2. Configure the settings like shown below:

Content

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

Style

Click on Hover.

Background Color - Set a background color which will be displayed upon hover.



3.
Configure the rest of settings as you desire and publish or update the page.


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 Raven Button element and set the Link option to the URL you got in step 4.

Did this answer your question?