Table of Contents
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!
selector.fadeIn::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: -3;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, right top, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, right top, color-stop(100%, #C9C9C9), to(#C9C9C9)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #C9C9C9), to(#C9C9C9));
background-image: -o-linear-gradient(left, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(top, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(left, #C9C9C9 100%, #C9C9C9 100%), -o-linear-gradient(top, #C9C9C9 100%, #C9C9C9 100%);
background-image: linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%), linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-webkit-animation: bordere 2.3s cubic-bezier(0.19, 1, 0.22, 1) forwards 1.3s;
animation: bordere 2.3s cubic-bezier(0.19, 1, 0.22, 1) forwards 1.3s;
}
@-webkit-keyframes bordere {
0% {
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
}
25% {
background-size: 100% 3px, 3px 0, 0 3px, 3px 0;
}
50% {
background-size: 100% 3px, 3px 100%, 0 3px, 3px 0;
}
75% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0;
}
100% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
}
@keyframes bordere {
0% {
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
}
25% {
background-size: 100% 3px, 3px 0, 0 3px, 3px 0;
}
50% {
background-size: 100% 3px, 3px 100%, 0 3px, 3px 0;
}
75% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0;
}
100% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
}
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!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
Looking for something else? Search across 2445 Elements right here:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
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?