.btn-common {
    background: rgb(255, 255, 255);
    color: #6c57e1;
    font-weight: bold;
    border-style: none;
    border-radius: 26px;
    cursor: pointer;
    transition: all ease-in-out 0.25s;
    position: relative;
    z-index: 1;
}

.btn-common::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6c57e1;
    z-index: -1;
    transition: all ease-in-out 0.25s;
    opacity: 0;
    border-radius: 26px;
    width: 0;
    height: 100%;
}

.btn-common:hover {
    color: #fff;
}

.btn-common:hover::after {
    width: 100%;
    opacity: 1;
}

.btn-common:hover::before {
    width: 0%;
    opacity: 1;
}

.btn-common-inverse {
    background: #6c57e1;
    color: #fff;
    font-weight: bold;
    border-style: none;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
    z-index: 1;
    border: 1px solid transparent;
}

.btn-common-inverse::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    z-index: -1;
    transition: all ease-in-out 0.2s;
    opacity: 0;
    width: 0;
    height: 100%;
}

.btn-common-inverse:hover {
    color: #6c57e1;
    background: #fff;
    border-color: #6c57e1;
}

.btn-common-inverse:hover::after {
    width: 100%;
    opacity: 1;
}

.btn-common-inverse:hover::before {
    width: 0%;
    opacity: 1;
}