Elementor Button Hover Fill Effect With Custom CSS

Facebook
Twitter
Reddit
WhatsApp

IMPORTANT! - Make sure your button is set to inline positioning and has a class of my-btn

CSS Code

				
					/*Fill box*/
.my-btn .elementor-button::before{
    content:'';
    position: absolute;
    background: black; /*<-- Change fill color here*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right; /*<-- Change fill out direction*/
    transition: transform .4s ease; /*<-- Change fill speed */
}

/*Hover class*/
.my-btn .elementor-button:hover::before{
    transform: scaleX(1);
    transform-origin: left; /*<-- Change fill in direction*/

}

/*Button text*/
.my-btn .elementor-button-text{
    z-index: 1;
}

/*Hover Icon*/
.my-btn:hover .elementor-button-icon{
    color: white; /*<-- Change Icon color here*/
    z-index: 1;
    transition: color .5s ease
}

/*Icone size */
.my-btn .elementor-button-icon{
    transform: scale(1.3); /*<-- Change icon size*/
    padding-left: 5px;
}


				
			

If you have a scroll to ID Button add this code along with the CSS code above.

				
					/*Text focus color */
.my-btn .elementor-button:focus {
    color: black !important;
}

/*Text hover color */
.my-btn .elementor-button:hover {
    color: white !important;
}
				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

Create a Custom Mobile Menu Drop Down In Elementor Pro

CSS /*Tablet breakpoint*/ @media(max-width:1024px){ /*Mobile nav column */ #nav-container{ display:none; overflow:hidden; } /*Switch nav widget to verticle on mobile */ .elementor-nav-menu–layout-horizontal .elementor-nav-menu

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.