Elementor tutorial for circle border animation with CSS

In this Elementor tutorial, we are sharing the Elementor design ideas on social media icons’ border animation. For this, we used Elementor WordPress free version. So, we do use a little CSS. But this circle border animation CSS is very simple and could have a high conversion to turning users into followers.

Here’s the CSS code that we used for the styling in the video. You can copy and paste it to your project to try it out.

.icon-border .elementor-icon {
	position: relative;
}
.icon-border .elementor-icon:after {
	content: "";
	position: absolute;
	display: block;
	width: 110%;
	height: 110%;
	left: -6px;
	top: -6px;
	border-style: dashed;
	border-width: 4px;
	border-radius: 50%;
	animation: spin 10s linear infinite;
}
@keyframes spin {
	100% {
		transform: rotateZ(360deg);
	}
}
.icon-border .elementor-icon:hover:after {
	animation: spin 2s linear infinite;
}

.icon-border.fb .elementor-icon:after {
	border-color: #3b5998;
}
.icon-border.pin .elementor-icon:after {
	border-color: #c8232c;
}
.icon-border.ins .elementor-icon:after {
	border-color: #833ab4;
}

Help us to inspire and produce awesome free WordPress tutorial videos like this. To do so, please subscribe to this YouTube Channel for exclusive content.

We also recommend you to check out this article Essential Plugins to make your WordPress website efficient