All button hover effects are created with custom CSS. If you encounter an issue in using them, you can read this documentation.
Table of Contents:
- Required settings
- Importing template
- Using a button hover effect
- Replacing icon
- Changing colors
- Using the button hover effects on Elementor Free
Importing and Using the Hover Effects
-- Required Settings
Before importing and use the hover effects, please check the following settings on your Elementor. Make sure they are enabled/active.
- Enable Unfiltered File Uploads: Enabled
- Optimized Markup: Active
-- Importing Template
After completing the purchase, you will receive an email containing the ZIP file of the template. Unzip the file and you will get the JSON file of the Elementor page template which hosts all of the button hover effects.
Next, create a new page by going to Pages -> Add Page on your WordPress dashboard and edit it with Elementor.
In the Elementor editor, click the folder icon to open the template library.
Once the template library window opens, go to the Templates tab and click the arrow icon.
Next, click the Select File button and select the JSON file you have just extracted.
Wait a moment while Elementor is importing your template. Once done, you can click the Insert button to load it in the editor.
-- Using a Button Hover Effect
After importing the page template -- which hosts the Button widgets -- you can simply copy a Button widget you love the hover effect of to the page you are working on. As simple as that.
A little note. The copy-paste feature only works on the same domain. Elementor doesn't support cross-domain copy-paste.
-- Video
We have created the following video to make it easy for you to import and use the button hover effects.
Editing the Hover Effects
-- Replacing Icon
Elementor uses the free version of Font Awesome for its icon library and we find that the icons are too basic. For this reason, we use a custom icon on each button.
There are a bunch of websites to download free icons. For this project, we use Bootstrap Icons.
If you want to use a custom icon too, you can simply download the SVG file of the icon you want to use. On the Elementor editor, you can click the Upload SVG button to upload it to Elementor.
On each Button widget that has an icon element, you will find the following lines on the CSS snippet:
.elementor-button-icon{
transform:scale(1.7) rotate(-90deg);
}The lines set the size and direction (rotation) of the icon. To change the size, you can change the number of the scale function. You can use either an integer (e.g., 1, 2, 3, etc.) or a decimal (e.g., 1.5, 2.5, 3.5, etc.).
To change the direction, you can change the number of the rotate function. For instance, if you enter 270deg, the icon will rotate by 270 degree clockwise. If you enter -45deg, the icon will rotate by 45 degrees counterclockwise.
-- Changing Colors
We use hex code to set the background color, border color and elements on the buttons that require color settings.
If you want to change the color, you can simply replace the existing hex code with the hex code of the color you want to use.
For instance, the 01 button has the fill effect of black (hex code #000000). If you replace the hex code with #266df5 then you will find the fill effect turns into blue.
***
Using the Button Hover Effects on Elementor Free
If you don't have Elementor Pro, you need to add the CSS snippet of each hover effect manually. You can access the CSS snippets here.
Enter the provided password and click the Submit button. You can find the password on the initial email sent by Gumroad after you completed the purchase. Or you can also find it on your content which you can access via Gumroad Library.
After successfully opening the password-protected content, import the JSON file of the hover effects.
Next, pick a hover effect you like (you can visit this page to see the preview). Copy the Button widget to a page you want to add the hover effect to.
Go to the code snippets page (the password-protected one) and copy the CSS snippet of the associated hover effect. If you copied the Button widget of hover effect number 1, for instance, then you need to copy the CSS snippet of Hover Effect 1.
Next, add the HTML widget and place it anywhere on your page.
Type <style></style> in the editor and paste the CSS snippet you have just copied between the opening tag (<style>) and the closing tag (</style>).
Alternative Method to Add the CSS Snippet
Apart from using the HTML widget of Elementor, you can also add the CSS snippet of the hover effect you like via WordPress Theme Customizer.
To do so, go to Appearance -> Theme Customizer on your WordPress dashboard.
Theme Customizer is not available on block themes by default. If you use a block theme, you can enable it. Read here to learn more.
Click the Additional CSS block to open the editor.
Paste the CSS snippet to the editor. This time, you don't need to add the <span></span> tag. Click the Publish button to apply the code on your website.
