波纹按钮效果

Question

请提供有关在按钮上添加波纹效果的脚本的帮助。当前脚本运行良好，但仅在单击按钮时有效，并且效果消失，我希望按住按钮并在按下按钮时将其保留，效果的暗度保持不变。

<style>
.bubble-places {
    visibility: hidden;
}
button.ripple-btn , .ripple-btn {
    overflow: hidden !important;
}

/* Ripple */
.ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.4) !important;
    transform: scale(0);
    position: absolute;
    opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .35s linear !important;
}

@keyframes rippleDrop {
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}
</style>


<script>
$(document).ready(function() {

function RippleBubbleEffect() {
 
let ripple_button = $("div.ripple-btn , button.ripple-btn");
 
    $(ripple_button).on("click", function(e) {

        // Remove any old one
        $(".ripple").remove();

        // Setup
        var posX = $(this).offset().left,
        posY = $(this).offset().top,
        buttonWidth = $(this).width(),
        buttonHeight = $(this).height();

        // Add the element
        $(this).prepend("<span class='ripple'></span>");

        // Make it round!
        if(buttonWidth >= buttonHeight) {
        buttonHeight = buttonWidth;
        } else {
        buttonWidth = buttonHeight; 
        }

        // Get the center of the element
        var x = e.pageX - posX - buttonWidth / 2;
        var y = e.pageY - posY - buttonHeight / 2;

        // Add the ripples CSS and start the animation
        $(".ripple").css({
        width: buttonWidth,
        height: buttonHeight,
        top: y + 'px',
        left: x + 'px'
        }).addClass("rippleEffect");
    });
}

// Вызываем RippleBubbleEffect скрипт
RippleBubbleEffect();

// Вызываем RippleBubbleEffect по нажатию на кнопки
$(document).on('click','div.ripple-btn , button.ripple-btn',function(e){
    RippleBubbleEffect();
});

});
</script>

总的来说，我想要一个类似于材质ui按钮的效果，该效果在按住时保持按钮的状态。