/* сброс и общие правила */
.btn31,
.btn31 *,
.btn31::before,
.btn31::after {
    box-sizing: border-box;
    border: 0 solid;
}

.btn31 {
    /* работает и на <a>, и на <button> */
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: #0e0e0e;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-weight: 900;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 1rem 2rem;
    cursor: pointer;
    border: 1px solid #1111;
    -webkit-tap-highlight-color: transparent;
}

.btn31::before {
    --progress: 100%;
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    clip-path: polygon(
            100% 0,
            var(--progress) var(--progress),
            0 100%,
            100% 100%
    );
    transition: clip-path 0.2s ease;
}

.btn31:hover::before {
    --progress: 0%;
}

.btn31:focus {
    outline: none;
}

/* можно добавить для доступности */
.btn31:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

/* обертка текста */
.textContainer {
    display: block;
    overflow: hidden;
    position: relative;
}

.text {
    display: block;
    mix-blend-mode: difference;
    font-weight: 800;
    position: relative;
    font-size: 13px;
}

.btn31:hover .text {
    animation: move-up-alternate 0.3s ease forwards;
}

@keyframes move-up-alternate {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(80%);
    }
    51% {
        transform: translateY(-80%);
    }
    100% {
        transform: translateY(0);
    }
}