How to create button fill effect in elementor without any plugin

0

In this tutorial we will learn how we can make a button fill effect without any plugin.

First add a button widget and make the size just like you want.

Then give the button a class name. I am calling it “fill_btn”.
Elementor gives button a class called “elementor-button”. So we need to target that class.
Lets open our CSS editor and do the magic.

.fill_btn .elementor-button{
background:linear-gradient(to right, red 50%, #fff 50%);
background-size:200% 100%;
background-position:right bottom;
transition: all 1s ease;
}

Here I have added a background gradient color to the button. “to right” means the color will go from left to right. then we will define 2 colors. You can use any color. In my case I am using red and white. So 50% red and 50% white.
Then we need to increase the background size to 200% width so the white color covers the entire button initially.

I have also set the background position and transition to smoother animation.

Now we have to set the hover CSS, so when someone hovers to the button the red color fills the entire button. So lets do it

.fill_btn .elementor-button:hover{
background-position:left bottom;
color:#fff !important;
}

When hovered I just Shifted the background position to left bottom instead of right bottom.
I also set the color to white. So that it is easier to read the text.

And we are done !!!

Here is the full codes.

.fill_btn .elementor-button{
background:linear-gradient(to right, red 50%, #fff 50%);
background-size:200% 100%;
background-position:right bottom;
transition: all 1s ease;
}

.fill_btn .elementor-button:hover{
background-position:left bottom;
color:#fff !important;
}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More