Elementor Button Hover Fill Effect With Custom CSS


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{
    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;
Notify of
Inline Feedbacks
View all comments

More to explorer

How To Make a Hover Card Like a PRO in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

Would love your thoughts, please comment.x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.