.button {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    padding: .5rem 1rem;
    margin: 0;
    position: relative;
    /*    width: 100%;*/

}

.button::before,
.button::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;5
}

.button--pan {
    font-weight: 700;
    /*    border: 2px solid #078E8E;*/
    border-radius: 3rem;
    overflow: hidden;
    color: var(--btn-bg-hover);
    background: var(--btn-bg-hover);
}

.button--pan span {
    position: relative;
    /*    font-size: .5rem;*/
}

.button--pan::before {
    content: '';
    background: var(--btn-bg-before);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);

}

.button--pan:hover::before {
    transform: translate3d(0, -100%, 0);
}

.button--pan:hover {
    color: var(--btn-text-hover);
}


.flip>.button {
    color: var(--menubtn-text-before);
    border: 2px solid var(--menubtn-bg-hover);
    background: var(--menubtn-bg-hover);
}

.flip>.button::before {
    background: var(--menubtn-bg-before);
}

.flip>.button:hover {
    background: var(--menubtn-bg-hover);
    color: var(--menubtn-text-hover);
}

/*
    #FF8000 橘色
    #FFFCCC 米色
    #078E8E 深色
    #C4F3F2 淺色
*/