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;
}
