Эффекты при нажатии CSS

<button class="mybutton mybutton--animate-click-one">
    <span class="mybutton__text">Первый эффект при нажатии</span>
</button>

<button class="mybutton mybutton--animate-click-two">
    <span class="mybutton__text">Второй эффект при нажатии</span>
</button>

<button class="mybutton mybutton--animate-click-three">
    <span class="mybutton__text">Третий эффект при нажатии</span>
</button>

.mybutton {
    position: relative;
    margin-right: 20px;
    padding: 4px 14px;
    border: 1px solid lightgreen;
    background: none;
    color: #286aab;
    overflow: visible;
    cursor: pointer;
}
.mybutton::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    content: "";
    opacity: 0;
}

.mybutton--animate-click-one::after {
    box-shadow: inset 0 0 0 35px rgba(111, 148, 182, 0);
}
.mybutton--animate-click-one.mybutton--click::after {
    animation: anim-animate-click-one 0.6s ease-out forwards;
}

@keyframes anim-animate-click-one {
    0% {
        opacity: 1;
        transform: scale3d(0.4, 0.4, 1);
    }
    80% {
        box-shadow: inset 0 0 0 2px lightgreen;
        opacity: 0.1;
    }
    100% {
        box-shadow: inset 0 0 0 2px lightgreen;
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
    }
}

.mybutton--animate-click-two::after {
    box-shadow: 0 0 0 3px rgba(111, 148, 182, 0.05);
}
.mybutton--animate-click-two.mybutton--click::after {
    animation: anim-animate-click-two 0.5s ease-out forwards;
}

@keyframes anim-animate-click-two {
    0% {
        box-shadow: 0 0 0 3px lightgreen;
        opacity: 1;
        transform: scale3d(0.6, 0.6, 1);
    }
    100% {
        box-shadow: 0 0 0 100px rgb(110, 180, 110);
        opacity: 0;
        transform: scale3d(1, 1, 1);
    }
}

.mybutton--animate-click-three::after {
    background: lightgreen;
}
.mybutton--animate-click-three.mybutton--click::after {
    animation: anim-nimate-click-three 0.5s forwards;
}

@keyframes anim-nimate-click-three {
    0% {
        opacity: 1;
        transform: scale3d(0.1, 0.1, 1);
    }
    100% {
        opacity: 0;
        transform: scale3d(8, 8, 1);
    }
}

jQuery(($) => {
    $(".mybutton--animate-click-one, .mybutton--animate-click-two, .mybutton--animate-click-three")
        .click(function () {
            return _this = this,
                $(_this).stop().addClass("mybutton--click"), setTimeout(function () {
                    $(_this).removeClass("mybutton--click");
                }, 600);
        });
});

document.addEventListener("DOMContentLoaded", () => {

    document.querySelectorAll(".beautiEff .mybutton").forEach(function (el) {
        el.addEventListener("click", function () {
            el.classList.add("mybutton--click"), setTimeout(function () {
                el.classList.remove("mybutton--click");
            }, 600);
        });
    });
});