Button widget is part of the native’s Elementor widgets, which is available on both Elementor Free and Pro. You can use it to create a CTA button or other type of buttons.
To make your button more impressive, you can add a hover effect which is also available regardless of the version you are on.
However, the built-in hover effects that Elementor offers look boring. Thankfully, Elementor supports custom CSS so that you can apply a custom hover effect without any limitation.
I have created some beautiful hover effects for the Elementor’s native Button widget and put them together into a single page template below. You can download the template and import it to the website you are working on.
Limitations with Elementor’s Built-in Hover Effects
Before you download the template, let’s talk about the built-in hover effects you can apply to your Button widgets.
As I said above, Elementor allows you to apply a hover effect to your button to make it more appealing to visitors. You can add animation effects like pulse, rotate, floating, and so on.
You can also apply a different style on the hover state from the normal state. For instance, you can apply a different background color, different border color, and so on.
The biggest problem with the Elementor’s built-in hover effects is that they are applied directly to the button element. There are no options to apply a hover effect to the before and after elements (the ::before and ::after pseudo selectors).
If you want to apply an advanced hover effect to a button, being able to target the before and after elements is super crucial because only this way you can add layers to your button.
How to Add a Custom Hover Effect to the Elementor Button Widget (with Custom CSS)
In CSS, you can add a hover effect to a certain element by adding the :hover pseudo selector to the element.
If you want to add a hover effect to an image element, for instance, then the selector that you can use is img:hover.
When you add the :hover pseudo selector to the img element (image element), the CSS declaration (the properties and values inside the curly brackets) will only take place when you hover your cursor over it (the image element).
Elements on the Button Widget
Above, I mentioned that the built-in hover effects of the Button widget are directly applied to the Button widget. Whereas, the Button widget itself consists of multiple elements where each element has its own selector.
By default, Elementor doesn’t allow you to apply a hover effect to a specific element of the button. Instead, once again, you can only apply a hover effect to the whole button. This limits your creativity.
With custom CSS, you can target a specific element inside the button to apply a hover effect to.
Here is the structure of the native Button widget of Elementor.
| Element | CSS Selector | HTML Element |
|---|---|---|
| Widget wrapper | .elementor-widget-button | <div> |
| The button | .elementor-button | <a> |
| Button link | .elementor-button-link | <a> |
| Button content wrapper | .elementor-button-content-wrapper | <span> |
| Button icon | .elementor-button-icon | <span> |
| Button text | .elementor-button-text | <span> |
To apply a hover effect to a specific button element, you can simply target the element you want and then add the :hover pseudo element.
For instance, if you want to apply a hover effect to the icon only, then you can use the selector of .elementor-button-icon:hover.
Adding Custom CSS
Elementor allows you to add custom CSS whether you are on the free version or the pro version. If you are on the free version, however, the process is a bit complicated because you need to add a class or ID every time you want to apply a custom style.
Also, you need to place the CSS snippet to theme customizer (or you can use a code snippet plugin).
On the pro version, meanwhile, you can directly place your CSS snippet to a widget. Adding the prefix of selector will make the CSS snippet you add only affect the concerned widget.
The cool thing from adding a hover effect via custom CSS is that you can also target the before and after elements for more creative effects.
10 Beautiful Button Hover Effects for Elementor
There are a bunch of Elementor add-ons that offer button widgets to replace the native Button widget of Elementor.
However, add-on is not always a smart solution. Especially if you only want to add a hover effect to a button.
Installing an add-on for a tiny feature like hover effect will make your website super bulky, which is not good when it comes to performance.
How are the Effects Created?
As I mentioned, I have created some hover effects for the Elementor’s native Button widget using custom CSS.
I added the CSS snippets directly to the Button widgets as I am on the pro version. Adding a CSS snippet directly to a widget offers flexibility because the snippet applies only on the concerned widget.
How to Use the Hover Effects
I put together the Button widgets (complete with the CSS snippets — the hover effects) in a single page template which you can download below.
After downloading the page template, you can import it to your website and edit it with Elementor.
Next, you can simply pick the hover effect you like and then copy the Button widget and paste it to the page you are working on, as shown in the following video.
List of the Hover Effects
1. Fill In (7 Variants)
The first button hover effect I created for this project is fill in. So, when you hover your cursor over a button, there will be a fill-in effect taking place.
Instead of one, there are 7 variations of the effect.
- Left to right
- Left to left
- Right to right
- From center
- Top to bottom
- Bottom to bottom
- Top to top
To create this effect, I used the ::before pseudo selector and set the width of the Button widget to inline.
2. Animated Gradient
Elementor allows you to create a gradient button, but can only add two colors. You can add a gradient to both the normal and hover states. However, there is no option to animate the gradient.
The only way to achieve it is by using custom CSS.
I used the keyframe CSS feature to animate the gradient. No JavaScript involved as I wanted to keep the button lightweight.
If you want to change the gradient, you can use online gradient generators like Codioful, Coolors.
3. Expanding Dot
Initially, the button doesn’t look like a button. Instead, it looks like a text with a large dot in the background.
But when you hover your cursor over the text, the dot will expand and eventually turn into a clickable button. I used yellow as the background color, but you can definitely change it according to your design scheme.
4. Expanding Arrow Icon
The concept of this hover effect is pretty similar to the one above when you will find a big dot instead of a button initially. The dot itself contains an arrow.
When you hover your cursor over it, the dot will turn into a clickable button. To edit the color of the dot (the button), you need to edit the CSS snippet.
No worries, I provided a comment to make it easy for you to change the color. All you need to do is to replace the hex code of the color.
5. Shimmer
This hover effect is not too visible because I used a semi-transparent color. But when you pay close attention, you will see a shiny effect move from the left to the right.
The color of the effect is completely editable. Again, I added a comment to the CSS snippet to make it easy for you to spot the color.
6. Gumroad-Like Hover Effect
In case you haven’t heard about Gumroad, it is an e-commerce platform where you can sell nearly everything. It has a cute color scheme and animation button. I tried to recreate its button hover effect with Elementor and managed to.
The Gumroad’s button hover effect looks appealing to me because it turns your button into three layers. Achieving this type of effect is easy because, as I said a couple times, CSS offers two pseudo selectors which you can place before and after the main element.
7. Push (2 Variants)
The idea to create this came when I stumbled on a website. The website had a unique button hover effect and I wanted to recreate it with Elementor.
It turned out that Elementor didn’t offer built-in options to create that kind of hover style so I needed to write a CSS snippet.
I created two variations of this hover style.
8. Diagonal Fill In
This is the follow-up of the fill-in effect I created earlier. I thought it would be nice to create a fill-in hover effect from another direction.
I also used black as the default color which you can replace according to your design scheme.
9. Moving Dual-Color Background
By default, you can apply an effect where the background color changes when you hover your cursor over it. Hover, you can only add a single background color. Also, there is no option to animate it.
With custom CSS, you can use both the before and after elements as background. Also, you can add animations effect using keyframes. And that’s exactly what I did with this hover effect.
10. Pulse
The pulse effect is already available as one of Elementor’s built-in hover effect options. However, it looks boring. Also, you can’t further customize it like changing the color or controlling the transition.
I created this hover effect to tackle the limitation. You can replace the color I set as well as the transition duration.
The hover effect itself is created using the flash value, one of the values supported by the animation property in CSS.
Summary
Button is one of Elementor’s native widgets which is available on both the free version and pro version. It has plenty of styling options. You can also add a hover effect to make it more attractive.
Unfortunately, the built-in hover effects that Elementor offers for its Button widget are limited enough. Fortunately, you can write CSS snippets to apply any hover effect you want.
If you have no CSS knowledge, I have created unique hover effects for Elementor’s native Button widget which you can get above.
I added comments to each CSS snippet on the widget to make it easy for you to customize the hover effect. Simply import the page template and copy and paste the Button widget you like to your project.
