Let's learn how to add this awesome border animation to any Elementor element!
To begin with, copy this code under Advanced > Custom CSS for your target element.
This will require Elementor Pro. For Elementor free users, give your Elementor a class name under Advanced, then replace 'selector' with your given class name. More information in the video!
<script> /* Please login to get the code * The code will be for the Simple Elementor Animated Border For Any Element! tutorial * Found at this URL https://element.how/elementor-animated-border/ */ </script>
Then, make use of a code editor to adjust the CSS code
If you want a different styling than what is offered by default. More information about this in the video.
Finally, enjoy your awesome Elementor animated border!
Let me know if everything works for you!
3 Responses
Excellent, exactly what I was looking for for a simplified version with only the bottom border, thank you.
Great, glad you enjoyed the article!
I'm looking for something slightly different. Can you help me? I'm not a coder!
Elementor has a nice animation named "Draw" that can be implemented when building a nav menu. When you hover over a menu item, a border is drawn around the border of the item's box. The path if follows is anti-clockwise; down, right, up, and then left. I've always thought it a shame that Elementor hadn't built the same border animations into all of the other widgets when hovering.
Can it be done for this?