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!
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?