Guide on adding a gradient button in Elementor

Jan 24, 2025 | Blog

How to Add a Gradient Button in Elementor (With and Without a Plugin)

Added a button to your site but unsure how to make it stand out? Don’t worry; we’re here to help you display gradients when a user hovers over the button.

Web designers add gradient buttons to websites for several reasons. They might suit the website’s branding or help retain customers with interactive design aesthetics. The new concept of interactive gradient buttons—the appearance of a gradient when a user hovers over the button—leads to a more engaging experience for visitors.

Unlike a simple gradient button, it’s kind of tricky to add these on-hover gradients to buttons on Elementor. That’s why we’re here in this article with a complete guide on creating such gradients in Elementor. 

We will demonstrate this with and without the help of a plugin. Let’s begin without any further ado!

What Is a Gradient and Its Semiotics in Web Design

A gradient is basically a mix of two or more colors that blend together to give a unique look.

Back in 2016, Instagram redesigned its logo with a gradient of multiple colors blending together to give an energetic vibe. Following its success, the web design industry soon adopted the trend of gradients.

Not only do gradients look cooler, but they are also quite effective when it comes to customer retention. An Enterprise Apps Today statistic says 58% of users prefer aesthetically pleasing websites.

Effect of Interactive Gradients on Buttons

The sole purpose of a button on your website is to drive conversions. That’s why it needs to be tempting and appealing to visitors.

Having a plain button can be seen as vague, failing to appeal to potential customers. However, if you design the button carefully, it might have a stronger effect on the visitor.

Especially, adding gradients that follow the semiotics of web design to a button significantly improves its visual appeal. Using gradients in web design can increase the customer retention by 15-30%.

Additionally, if the gradient appears when the visitor hovers over a button, they will be more likely to engage with other buttons on the web page. And ultimately clicking on the desired CTA button to drive a conversion!

Adding Gradient to a Button in Elementor

Look, it’s all really simple to add a gradient to a button in Elementor. You don’t have to be a tech geek to do all of this. Just follow these simple steps, and you will have it.

  1. First, go to the Elementor editor on your website and start inserting elements into the web page. Look for the “Button” widget on the menu on the left side.
  1. Once you find that, click on it to insert a button. Half the job is done here.
  1. Next, click on the “Style” tab from the menu, as shown in the screenshot below.
Style tab of the Elementor Button widget.
  1. After going to the style tab, locate the Background Type option and click on the highlighted option in the screenshot below. 
Background Type of a Button in Elementor.

Clicking on it will add the intended gradient to your button.

  1. After this, you can choose from different color combinations to customize the gradient. 
Gradient Button in Elementor.
  1. Slide below, and you will find more customization options for the gradient button, as the attached screenshot shows.

In short, this is how you decorate the button with pleasing aesthetics to make it more appealing to customers. But if you want to take it a step further and add the on-hover gradient button, things are not as simple there. 

Continue reading to learn more about it.

Adding On-hover Gradient Button in Elementor (Using Custom CSS)

By default, Elementor offers the option to add a gradient to a button when users hover over it. You simply need to change the style tab from Normal to Hover

Switching Normal tab to Hover in for an Elementor Button widget.

Now, all the customizations you’ll apply on the button, will be for the hover effect. 

But in some cases, you might want to use a custom CSS. For example, if you have multiple buttons across your site and want to make sure of uniform hover effects, then using a custom CSS can centralize the styling. With this, you’ll avoid manually configuring the hover effect for each button.

Yes, with the Elementor Global feature, you can easily use a single element multiple times on different locations of a website, but what if some themes or external stylesheets override Elementor’s built-in options? The breaking of the layout. Thus, by using custom CSS to add an on-hover gradient, you can help enforce specific styles and resolve such conflicts.

Let’s see how to do that. Follow these steps to get it done.

First, insert a button by going to the Insert Widget menu in Elementor.

The Elementor Button widget in the widget list.

After setting up the basics, go to the advanced tab, as shown in the screenshot below.

Advanced tab in the Elementor.

Scroll below and click on the Custom CSS option to add the gradient.

Custom CSS section of the Elementor.

Copy the custom CSS code for the gradient buttons given below.

selector {
  background-color: transparent; /* Default background color */
  transition: background 0.3s ease; /* Smooth transition effect */
}

.elementor-button:hover {
  background: linear-gradient(45deg, pink, cyan);
  background-size: 200% 200%;
  transition: background 0.3s ease;
}

Now paste it into the box as shown in the attached screenshot.

Gradient Button CSS in Elementor.

And finally, see the gradient in action by hovering over the button. Here is a screenshot that shows the final result.

Gradient button on hover using the Custom CSS.

If you want to change colors, replace the color names highlighted in the below screenshot with those of your desired colors.

Gradient code highlighted

And that’s how you can add hovering gradient buttons to Elementor without using the built-in feature.

Adding Gradient Button in Elementor Using a Plugin (Advanced On-hover Gradient Styles)

Here, we will use the WPMozo Addons for Elementor plugin to add an on-hover gradient button in Elementor easily.

WPMozo Addons for Elementor

The WPMozo Addons for Elementor plugin offers advanced widgets for Elementor. These widgets also include the Advanced Button widget with advanced animations and other design options.

WPMozo Addons for Elementor

Using this Elementor button widget by WPMozo, you can create and customize buttons in multiple ways, such as solid borders, transparent backgrounds, and double shutters.

The widget option we will need for this article is the gradient on hover button shown in the screenshot below.

Advanced button multiple designs

This button gives a static look normally. But when a cursor is hovered over it, the gradient appears in a smooth animation that also looks satisfactory. This tempts visitors to interact with CTA buttons on your website.

Step-by-step Guide to Use the Gradient on Hover Widget

Follow these steps to insert the gradient-on-hover button into Elementor.

First, go to the Elementor editor and open the menu to insert widgets. Then, scroll to the bottom, where WPMozo’s addons are displayed.

Now, you will locate the Advanced Button widget and insert it into the web page.

Advanced Button widget in the Elementor.

In the next step, add custom text and apply other settings of your button such as Button Type, Link, and the Link Target.

Button titles Advanced Button widget.

Once this is all done, click on the Hover menu as shown in the screenshot below.

Switching to Hover from Content settings of WPMozo Advanced Button widget.

Here, you get the options to apply on-hover gradient to the button, as well as the style to show it. In order to add gradient, select the Gradient icon next to the Background Type. As soon as you do that, it will open the color options.

WPMozo Advanced Button widget. Background Type as Gradient.

First, select the first color and set its location by sliding the progress bar. Then, do the same with Second Color.

Selecting gradient color for the on hover gradient button in Elementor.

After adding the color, you can select the gradient Type as Liner or Radial. Based on the gradient type, apply the customizations, and once you’re done, the button with on-hover gradient will be like the following:

Apply Gradient Animation Style

The best thing about Advanced Button widget by WPMozo is that, you can animate the on-hover gradient, adding an extra layer of interactivity. So, if you want to apply the style, simply head to the Background Fill Style and select available style from the list. Based on your selection, the button gradient will animate as follows:

Looks interesting, right? But that’s not all you can do with the on-hover gradient button in Elementor. There’s more that the WPMozo widget provides.

Do More With Your On-Hover Gradient Elementor Button

The Advanced Button widget of WPMozo lets you do more with your “on-hover gradient Elementor button.” You can:

  • Apply different layouts, such as Classic and Conversion.
WPMozo Classic and Conversion button example.
  • Add multiple buttons together: Inline or stacked
  • Customize Row and Column spacing

And there’s more you can do with the Elementor button you create using the Advanced Button widget of WPMozo.

Wrapping Up

Web design is all about aesthetics and captive attractions on a website that drive conversions. Gradients have become an essential part of the web design language as of late.

Web designers use gradients to brand web pages and design CTA buttons. However, some people want to make these buttons more interactive by adding buttons that display a gradient after the user hovers over it.

This article provides a complete guide on how to do just that.

We have covered the step-by-step procedure of adding gradients both with and without the help of external add-ons in Elementor. 

Now, it’s your turn to try that out.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

What’s Ahrefs Free Keyword Tool, and What Makes It a Better SEO Tool

What’s Ahrefs Free Keyword Tool, and What Makes It a Better SEO Tool

Are you here looking for a free keyword tool for keyword research? If yes, then this article is for you. Who doesn’t know about Ahrefs? A leading powerful SEO software on the internet. Ahrefs is one of the best among its competitors, like Semrush, and it has all sorts...

15+ Best Elementor Addons for Free You Can Use in 2025

15+ Best Elementor Addons for Free You Can Use in 2025

Are you planning to give your site a new look in 2025? Here is a list of the best free Elementor add-on plugins to help you do just that! While Elementor's core features are sufficient to create a functional website, you might need something extra to meet the latest...

What’s Semrush, and How It Can Help You Grow Your Online Business

What’s Semrush, and How It Can Help You Grow Your Online Business

Have you ever heard about Semrush? We think you might have. If you have an online business, you can't miss this company's name, we doubt. No online business can become successful without the proper and strategic SEO. People like you and us, who are into online...

Explore, Learn, Grow: Join Now!