Elementor Liquid Button Hover Effects/Animation

 

 

CSS code snippet for Liquid Button Hover Effect (with Dark Background):

selector{
    --text-hover-color: #000;
}
selector .elementor-button-wrapper{
    position: relative;
    transition: 0.5s;
}
selector .elementor-button-wrapper a{
    background: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    color: var(--text-hover-color);

}
selector.anim .elementor-button-wrapper a{
    animation: anim2 0.7s steps(22) forwards;
}
selector.anim .elementor-button-wrapper a:hover {
    animation: anim1 0.7s steps(22) forwards;
}
selector .elementor-button-wrapper .before{
    position: absolute;
}

@keyframes anim1 {
    from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
    to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
}

@keyframes anim2 {
    from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
    to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
}

 

JavaScript code snippet for Liquid Button Hover Effect:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery
$(document).ready(function(){
    
$('.liquid-button .elementor-button-wrapper').each(function(){
    
    var btnText = $(this).find('.elementor-button-text').text().trim()
    
    $(this).children('span.before').remove()
    $(this).prepend('<span class="before elementor-button">' + btnText + '</span>')
})

$('.liquid-button').hover(function(){
    $(this).addClass('anim')
})
})

</script>

 

CSS code snippet for Liquid Button Hover Effect (with Light Background):

selector{
    --text-hover-color: #fff;
}
selector .elementor-button-wrapper{
    position: relative;
    transition: 0.5s;
}
selector .elementor-button-wrapper a{
    background: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    color: var(--text-hover-color);

}
selector.anim .elementor-button-wrapper a{
    animation: anim2 0.7s steps(22) forwards;
}
selector.anim .elementor-button-wrapper a:hover {
    animation: anim1 0.7s steps(22) forwards;
}
selector .elementor-button-wrapper .before{
    position: absolute;
}

@keyframes anim1 {
    from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
    to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
}

@keyframes anim2 {
    from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    }
    to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    }
}

selector .elementor-button-wrapper,
selector .before,
selector .elementor-button-text{
    filter: invert(1);
}