Button hover effect with Elementor free version

In this Elementor tutorial, we showed this beautiful & minimal Button hover effect with Elementor that may have a high click rate. These high-converting buttons are done in Elementor free version. We did use a bit of CSS, so, this is a button animation CSS. If you are a beginner and want to know, how to use Elementor, check out our Elementor videos.

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.

.btn a {
	position: relative;
}

.btn a:before {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: yellow;
	border-radius: 25px;
	left: 0;
	top: 0;
	z-index: -1;
	transition: 0.3s;
}

.btn a:hover:before {
	width: 100%;
}

.btn.btn--2 a::before {
	left: 50%;
	transform: translateX(-50%);
}

.btn.btn--3 a::before {
	left: auto;
	right: 0;
}

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