Simple Elementor Animated Border For Any Element!

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!

Comments

3 Responses

  1. 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?

Leave a Reply