In Elementor, you can add a button to your page using its native Button widget. This widget comes with plenty of customization options, including the ability to add a hover effect.
You can add hover effects like animation, different background color, different border color and so on.
You can also add a more advanced hover effect to the Button widget using custom CSS.
Got no CSS knowledge? No worries, I have created ready-to-use Button widget templates -- complete with hover effects.
Shortcuts ⤵️
- What is custom CSS?
- Adding hover effect with custom CSS
- List of button hover effects
- Using the hover effects
- Summary
What is Custom CSS in Elementor?
In the context of Elementor, custom CSS is a feature where you can write your own CSS snippet to achieve a certain style that is not available in Elementor by default.
By writing a CSS snippet, you can target a specific element of a widget to apply the style you want.
A simple instance. You can write a CSS snippet to specifically target the icon element of the Button widget in order to be able to apply more styles like, for instance, rotate.
In the default styling options offered by Elementor, there is no option to rotate the icon of the Button widget.
In Elementor, you can add custom CSS whether you are on the free version or the pro version.
If you are on the pro version, however, the process of adding custom CSS is way easier as you can directly add your CSS snippet to a widget (and a container).
How to Add a Hover Effect to a Button in Elementor with Custom CSS
Before you add a hover effect to a Button widget in Elementor with custom CSS, it's crucial to know that Elementor already has a built-in feature to add a hover effect.
With Elementor's built-in hover effect feature, you can add hover effects like animation, different background color, different border style and so on.
If you want to add an advanced hover effect, then you can add custom CSS.
Getting to Know the :hover Pseudo Selector
The very first thing you need to know before you can add a hover effect via custom CSS is to know the :hover pseudo selector.
The :hover pseudo selector is a CSS selector that targets an element on the hover state. You can add it right after a selector. Be it a class selector, ID selector or element selector.
For instance, if you add the :hover pseudo selector after the img element selector, your CSS declaration (the properties and values inside the curly brackets) will only take place when you hover your cursor over the image.
img:hover{
transform: rotate(45deg);
}On the CSS snippet above, the image will only rotate when you hover your cursor over the image.
This is (understanding the :hover pseudo selector) the prerequisite if you want to add a hover effect in Elementor via custom CSS.
Elements on the Button Widget
After you understand the :hover pseudo element, the next step is to learn the elements you can target in the Button widget.
The Elementor's native Button widget consists of several elements and you can target a specific element to apply a hover effect to.
You can, for instance, target the button text only. For this case, you can add the following snippet.
selector .elementor-button-text:hover{
transform:rotate(45deg);
}With the above snippet, only the text element will rotate when you hover your cursor over the button text.
Here are the elements you can target on the Elementor's native Button widget.
| Element | CSS Class Selector |
|---|---|
| Button widget wrapper | .elementor-widget-button |
| The button itself | .elementor-button |
| Button link | .elementor-button-link |
| Button content wrapper | .elementor-button-content-wrapper |
| Button icon | .elementor-button-icon |
| Button text | .elementor-button-text |
Where to Add the CSS Snippet?
You can add custom CSS whether you are on Elementor Free or Elementor Pro.
If you are on Elementor Pro, you can add the CSS snippet directly to the widget where you want to target the element of.
First, edit the widget you want to add the custom CSS to and go to the Advanced tab on the settings panel and then open the Custom CSS settings block.
You can use the prefix of selector to make your CSS snippet to be applied only on the concerned widget.
If you are on Elementor Free, the process of adding custom CSS requires more steps.
First, you need to write the CSS snippet to theme customizer then you need to add either CSS class or ID to the widget you want to apply the custom CSS to.
Elementor Button Hover Effects
To save you time (or in case you have no CSS knowledge), I have created the following hover effects for Elementor's native Button widget.
How to Use the Hover Effects
I put together the Budget widgets -- complete with their respective hover effects -- into a single page template which you can import to your website.
After importing the page, you can simply pick the hover effect you like and copy the widget to the page you are working on.
Watch the video below:
You can click the button below to get the page template.
List of 20 Elementor Button Hover Effects
1. Gumroad-like Hover Effect
I like Gumroad's button hover effect because it looks cool to me. Creating a button hover like this one is easy enough using CSS.
The main idea is to place the before and after elements behind the main element (the button element). You can achieve it using z-index.
You can set the z-index values of the before and after elements smaller than the main element.
For instance, if you set the z-index of the main element to 1, then you can set the z-index of the before and after elements to -1 and -2, respectively.
2. Animated Gradient
Elementor has a built-in feature to add a gradient to the Button widget. Be it on normal state or hover state. However, there is no option to animate it.
The only way to animate a gradient in Elementor is via custom CSS.
CSS itself has a feature, keyframes, which you can use to add an animation effect to an element. I use this feature to animate the gradient of the button.
3. Animated Gradient Background
This is the follow-up of the hover effect above. Instead of applying the animated gradient directly to the button widget, I applied it to the background element.
I use the after element to add the gradient background to the button.
4. Shining Edges
This one is still about gradient. But this time, it's not being animated. It is something like a gradient border, but not a full border.
When you hover your cursor over the button, the "border" will show up at the edges of the button.
To achieve this effect, I use solid-to-transparent gradient type.
5. Fill-in
This is a simple hover effect but not achievable with Elementor's built-in hover effect options.
To create a fill-in hover effect, you need to add either the before or after element and place it behind the main element (button in this case) by setting the z-index smaller than the main element.
I created several variations of this effect.
6. Expanding Dot
This is a unique hover effect. Here is how it works.
Initially, you won't see a button. Instead, you will see a text with a dot as its background. But when you hover your cursor over the text, the dot will expand and turn into a clickable button.
The color of the dot is completely editable. I use yellow but you can replace it with any color you like.
7. Expanding Arrow Icon
This effect is a bit similar to the one above where you initially see a text with a big dot as the background. The dot will also expand when you hover your cursor over the text.
However, instead of from the center, the dot expands from the left side to the right side.
Also, there is an arrow icon on the dot -- which will also expand as you hover your cursor over the button.
8. Shimmer
Keyframes is a CSS feature that allows you create a unique animation feature without involving JavaScript. This shimmer button hover effect is an example of how the feature is implemented.
When you hover your cursor over the button, you will see a shining effect moving from the left to the right.
9. Push
On the hover animation options that Elementor offers, you will see an option called "Push". But it doesn't look good to me. I wanted a different push effect so I created this effect with CSS.
On normal state, I added a new layer and placed it behind the main element. On the hover state, the main element (the main layer) will move down to the second layer to create a push effect.
I created two variations for this hover effect: rectangle and parallelogram.
10. Diagonal Fill-in
This effect is a follow-up effect of the fill-in effect. On the fill-in effect mentioned earlier, the fill-in effect moves from the edge with both the vertical and horizontal directions.
In this effect, the fill-in effect moves diagonally from the center area to the two sides of the button. The movement speed -- as well as the color -- are totally adjustable.
11. Moving Dual-Layer Background
With custom CSS, you can add two layers behind a button and style them up according to your preference.
If you want it, you can also apply an animation effect to the layers using keyframes. That's exactly what I did with this effect.
I used gradients on each layer, but you can replace it with a solid color if you want.
12. Pulse
Same as push, the Pulse option is also available on the built-in hover animation effects that Elementor offers. But again, the effect doesn't work as I expected so I created my own pulse effect.
This hover effect also uses keyframes to create the animation effect for the pulse.
I used a dark color for the pulse, but you can replace it to match your scheme.
13. Slide-in Icon
Elementor allows you to add an icon to a Button widget. You can even use a custom icon of the icon options that Elementor doesn't suit you.
Unfortunately, the styling options for the icon element on the hover state are limited. You can't, for instance, show the icon only on the hover state. This hover effect tackles this limitation.
On normal state, you only see a button with a text. But when you hover your cursor over the button, the icon will show up with a sliding effect from the left to the center.
You can easily replace the icon from the settings panel.
14. Splitted Background
This hover effect also uses two layers behind the button element just like other effects above. On the normal state, the layers are not visible.
But when you hover your cursor over the button, the two back layers will show up with a split effect. One layer to the left direction and the other one to right direction.
15. Blurry Gradient
Creating a gradient button is super easy in Elementor because it already has a built-in feature to do so. But creating a button with a blurry gradient in the background is a different story.
You need to write a CSS snippet to add an extra layer to your button and use the filter property to add the blur effect.
16. Rotating Icon
As I mentioned, Elementor allows you to add an icon to your button. Sadly, it doesn't offer styling options dedicated to the icon.
The styling options for the icon element is grouped with the text element. When you change the color icon, for instance, the color will also apply on the text.
Custom CSS allows you to apply a custom style for the icon element. And of course, you can add a custom style for both normal state and hover state.
This hover effect will only rotate the icon element on hover state.
17. Bounce Up
The Bounce option is also available as one of the hover effects that Elementor offers. But if you want to apply a unique bounce style, then you can use this hover effect.
This hover effect itself is similar to push but with a different style on normal state.
On normal state, you will see a button with a regular style. But when you hover your cursor, you will see a button with a bounce effect.
18. Rainbow
On normal state, you will see a button with a solid color. As soon as you hover your cursor over the button, you will see a rainbow animation effect that moves from the left to the right.
The rainbow is basically a gradient consisting of rainbow colors. You can replace the colors of the gradient with any colors you want.
19. Connected Border
This is a unique button style that I personally love. The button has a solid border but is not fully connected. The border will be fully connected when you hover your cursor over the button.
The border itself has the color of black, but you definitely replace it with any color you like. I added a comment on the line where you can replace the hex code of the border color.
20. Expanding Fold
This is another button that has a unique style on normal state. You will find a little fold a thet top-left side of the button.
When you hover your cursor over the button, the fold will expand.
For the button style itself, I use a gradient. If you prefer a solid color, you can simply replace the gradient with the color of your choice.
Summary
There are two options to add a hover effect to a button in Elementor. First, you can use Elementor's built-in feature. Second, you can use custom CSS.
Using Elementor's built-in feature is the easier one, but you have limited hover effect options. Using custom CSS requires CSS knowledge but you have limitless hover style options.
If you have no CSS knowledge yet want to add a unique hover style to your button, then you can pick one of the custom hover effects I have created above.