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, use a code editor to make adjustments

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!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments