Elementor comes with a native Button widget which you can use for a wide range of purposes. You can decorate it with the built-in styling options that Elementor offers. You can apply a hover effect too.
A hover effect is what makes your button look appealing, which eventually leads to a better conversion because visitors are likely to click a button that is visually good.
Elementor offers some built-in hover effects you can apply to your button. If they are not enough, you can apply custom CSS to achieve the custom hover effect you want.
And if you don't have enough time to write the custom CSS yourself (or you are running out of hover effect ideas), I have created some hover effects with custom CSS which you can get below.
Continue reading this post to learn how to use the hover effects.
Shortcuts ⤵️
- Built-in hover effect options
- Button widget structure
- 20+ custom button hover effects
- Using the hover effects
- Summary
Built-in Hover Effects on the Elementor Button Widget
As I mentioned, Elementor offers some built-in hover effects you can apply to your button. You can access them from the Hover tab under the Style tab on the settings panel.
In total, there are about 27 hover animation options you can choose from. You can also control the transition duration for a smoother animation effect.
Apart from animation effects, you can also apply other styles to hover state on your button. For instance, you can use a different background color from the normal state, use a different text color, use a different border color, and so on.
For more advanced effects like rotate, scale and skew, you can go to the Transform settings block under the Advanced tab on the settings panel.
If they are still not enough, then the last option you have is custom CSS.
You can apply custom CSS to Elementor whether you are on the free version or the pro version.
On the free version, you can apply custom CSS via either class selector or ID selector. For the CSS snippet itself, you can place it to theme customizer or other locations according to your choice.
On the pro version, you can apply custom CSS by directly adding the CSS snippet to the Button widget which is way easier and more flexible.
Understanding the Structure of the Elementor Native Button Widget
Before you apply custom CSS to the native Button widget of Elementor, it's essential to understand the structure of the widget.
The native Button widget of Elementor consists of the following elements:
| Element | Class Selector | HTML Tag |
|---|---|---|
| Button widget wrapper | .elementor-widget-button | <div> |
| The button itself | .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> |
If you are on Elementor Pro, you can directly target a specific element on the CSS editor on the settings panel. Using the prefix of selector will make the CSS declaration apply on the current widget only.
Here is an example:
If you want to apply a custom hover effect via custom CSS, you can simply add the :hover pseudo selector on the element you want to apply the hover effect to.
If you add the :hover pseudo selector to the .elementor-button-icon class, for instance, the button icon will only rotate when you hover your cursor on it.
20+ Hover Effects for the Elementor Button Widget (Created with Custom CSS)
Not all Elementor users have CSS knowledge to create the custom hover effects for the Button widget. Even if you do, you may not have enough time to create one yourself.
Again, I have created some hover effects for the native Button widget of Elementor using custom CSS.
Here is the demo of the hover effects I created.
How to Use the Hover Effects
I have put together all of the hover effects I created on a single Elementor page in which the template is available in a JSON file.
After importing the page template (the JSON file), you will find 23 Button widgets in which each Button has a unique hover effect.
Here are the details about how to use the hover effects.
Step 1: Import the Template and Copy the Button Widget You Like
First, you need to download the page template I have created specifically for this project. You can download it by clicking the button below.
By the way, I provide the file in a ZIP format. You can extract it first after downloading.
After extracting the ZIP file, you will get a folder containing the JSON file of the Elementor template.
Next, create a new page on your WordPress site and edit it with Elementor. On the Elementor editor, click the folder icon on the canvas area to open the template library window.
Go to the Templates tab on the template library window and click the arrow icon.
Click the Select File button and select the JSON file of the template you want to import.
You will see a warning from Elementor after selecting a JSON file. Simply click the Continue button to continue.
Wait a moment while Elementor is importing your template. Once done, you can find it in the template library. Simply click the INSERT button to take it to the Elementor editor.
Once the template is loaded on the Elementor editor, you will see 23 Button widgets with their respective hover effect. Simply pick the hover effect you like and copy the Button widget and paste it to the Elementor page you are working on.
Step 2: Tailor the Hover Effect Styles
I applied standard styles for the Button widgets on the normal state. Sure, you can style them up using the Elementor editor to make them match your design scheme.
What about the hover state?
To edit the style on hover state, you need to have CSS knowledge. But don't worry if you have no CSS knowledge.
On the CSS snippets, I added some comments on the parts that need to be changed. Such as background color, border color, and so on. You can simply replace the hex code of the color with the hex code of the color you want to use.
By the way, I added the CSS snippets directly to the Button widgets. To view the CSS snippet on each Button widget, you can go to the Advanced tab on the settings panel and open the Custom CSS block.
🎁 Bonus Resources
There are a bunch of free resources on the internet you can leverage for your Elementor project (or any design related projects).
Especially to style up the Button widgets on your Elementor design, you can use the following free resources:
Free CSS Gradient Generators
Some Button widgets on the template I offer have gradient effects. These are CSS gradients. If you want to replace them with your own gradients, there are a bunch of free tools that you can use.
Here are some tools I recommend to generate CSS gradients for free:
Websites to Download Custom Icons for Free
Elementor allows you to add an icon element to a Button widget. Elementor itself uses the free version of Font Awesome to power its icon library. While the amount is huge, the icons are very basic and boring.
If you want to use custom icons on your Button widgets, here are some websites you can visit:
All websites on the above list offer free SVG icons. You can use the icons with or without editing them.
If you need to edit the icons, here are some free tools that you can use:
Summary
Elementor already offers a built-in feature to apply a hover effect to a Button widget. You can apply an animation effect or simply change the background color of the button on hover state.
If you want to apply a unique hover effect that is not offered by Elementor, you can use custom CSS.
Custom CSS offers unlimited possibilities to style up your Button widgets on both normal and hover state.
I have created custom hover effects for the native Button widget of Elementor and put them together on a single page template which you can import.
After importing the template, you can copy a Button widget you want to get the hover effect.
Using custom CSS to apply a unique style is more recommended than installing a third-party Elementor add-on because it makes your website easier to manage.
And more importantly, it can save you a lot of money.
