body{
    display: flex;
    justify-content: center;
    align-items: center;
    --btncolor: rgb(64, 43, 167);
}

.btn{
    padding: 10px 20px;
    border: 2px solid var(--btncolor);
    color: var(--btncolor);
    text-decoration: none;
    border-radius: 20px;
    margin-top: 200px;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btncolor);
    z-index: -1;
    transform: translate(-100%);
    transition: all 1s;
}

.btn:hover::before{
    transform: translatex(0);
}
.btn:hover{
    color: aliceblue;
}