Elementor tutorial for button hover effects

In this WordPress video lesson, we will learn to create a Button hover effect with Elementor free version and CSS.

In this Elementor tutorial, we showed beautiful & minimal Button hover effects with an icon in 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 on our YouTube Channel.

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

.btn a {
    position: relative;
    overflow: hidden;
}

.btn a i {
    background-color: orange;
    position: absolute;
    right: -50px;
    top: 0;
    height: 100%;
    line-height: 60px;
    padding: 0 15px;
    transition: 0.3s;
}

.btn a:hover i {
    right: 0;
}

.btn a:hover {
    padding: 20px 60px 20px 30px !important;
}

.btn.btn--style2 a i {
    background-color: #2980b9;
}

.btn.btn--style3 a i {
    background-color: #d35400;
}

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

Hooray! 🎉 Our Ultimate Figma Mega Course is live for you!

X
Cookie settings

Cookies allow us to better serve you. We collect information about the use of our website. You can manage your cookie settings below.

Essential cookies

Essential cookies are necessary for the functioning and development of our website. They do not store information that could immediately identify you.

Visitor measurement and analytics

We use the Google Analytics cookies to track visitor behavior and measure our website performance.