The new stats showcased at its homepage reveals that Elementor is now powering over 21 million websites on the internet. This is a huge number and there is one clear reason why Elementor managed to achieve this achievement.
With Elementor, anyone can build their own website regardless of their coding skills level.
Even if you are not a coder, you can still build a decent website with Elementor thanks to its drag-and-drop editing experience.
AI-powered website builders are popping up almost every day in today’s AI era but they can’t really dethrone Elementor (or WordPress in general).
That’s because they don’t offer something that Elementor has been offering: a joyful visual web building experience.
Elementor’s visual editor may not be the best, but it is one of the most user-friendly ones. And that’s the exact reason to get Elementor to be at the current position.
Although you can create a website with Elementor without needing to have coding skills, there are some situations where coding knowledge is needed.
Like when you want to create a custom hover effect to a button to add a premium vibe to your website.
Issues with Elementor’s Built-in Hover Effects
In Elementor, you can create a button using the Button widget. This is the widget dedicated to creating a button. You don’t need to create a component like, for instance, Framer.
You can also sweeten the look of your button by adding a hover effect. And here is the problem.
Elementor doesn’t really offer hover effects worth using. At least if you want to add a premium vibe to your website. The hover effects that Elementor offers are too generic and boring.
Also, you have no control over the hover effect of individual button elements (text and button). The button hover effect is applied directly to the whole button.
Elementor has a built-in custom CSS feature to apply a custom hover effect to a button, but I bet not all Elementor users have CSS knowledge.
And for this exact reason, I created these hover effects.
You can probably create the same hover effects using a third-party add-on. But installing an add-on is not always a smart solution. Especially if you have a big concern on site performance and plugin management.
I only used CSS to create the hover effects. No JavaScript, no external resources. Because I understand how painful it is to have your site’s performance getting slower due to extra HTML requests and JavaScript rendering.
Hover Effects Demo
You can watch the following video to view the button hover effects I created.
Or if you prefer to view the live demo on a live page, you can click the link below.
Using the Button Hover Effects
Like I said, I only used CSS to create the hover effects. In Elementor itself, there are two options to add custom CSS.
Pro users can add a CSS snippet directly to a widget and can target a specific element using CSS class.
To make the CSS snippet apply only to a specific widget, you can use selector as the prefix.
What if you don’t have the pro version?
You can use the HTML widget to place your CSS snippet or you can also add it to the Additional CSS in WordPress Theme Customizer.
If you want to use the HTML widget, make sure to type the <style></style> before you can start to write the CSS code.
Since I use Elementor Pro, I added the CSS snippet of each effect directly to the Button widgets.
I put together the Button widgets (complete with the hover effects) to a page and exported it to a JSON file so that you can import it on your project.
You can get the JSON file of the page below.
After downloading the JSON file, you can create a new page and edit it with Elementor and then import the JSON file.
To use a hover effect, you can simply copy the Button you want to use the hover effect of to the page you work on.
One thing. The copy-paste ability works only on the same domain. This means, you can’t copy a Button widget from one domain to another.
Which also means that you need to import the JSON file to a different domain if you want to use it.
Here is the documentation of the hover effects.
Top comments (0)