Simple Elementor Animated Border For Any Element!

Simple Elementor Animated Border For Any Element!

Check out our CSS Course, made especially for Elementor users.

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:

Checkout the Elementor Addon Finder directly

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

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.