Elementor tutorial for button hover effects with icons

Elementor Tutorial | Updated on
In this WordPress video lesson, we will learn to create a Button hover effect with Elementor free version and CSS
Editor

In this Elementor tutorial video, we designed high-converting button hover effects with icons for your website. We made this using Eementor free version. And we did use a bit of Elementor CSS tricks So, watch the whole button hover effects CSS video, without skipping.

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

/* Button Style 1 */

.btn {
        overflow: hidden;
}

.btn i {
	position: absolute;
	left: -25px;
	transition: 0.3s;
}

.btn:hover i {
	left: 50%;
	transform: translateX(-50%);
}

.btn .elementor-button-text {
	transition: 0.3s;
}

.btn:hover .elementor-button-text {
	transform: translateX(100%);
}

/* Button Style 2 */

.btn.btn1 i {
	left: 50%;
	transform: translateX(-50%);
	top: -30px;
}

.btn.btn1:hover i {
	top: 15px;
}

.btn.btn1:hover .elementor-button-text {
	transform: translateY(200%);
}

/* Button Style 3 */

.btn.btn2 i {
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;
}

.btn.btn2:hover i {
	bottom: 15px;
}

.btn.btn2:hover .elementor-button-text {
	transform: translateY(-200%);
}

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

↑