exo6.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;

}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;

}

.btn {
    width: 20%;
    height: 100px;
    font-size: 4em;
    position: absolute;
    border: 2px solid gray;
    justify-content: center;
    background-color: grey;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.btn::before {
    content: "Hoverable";
    text-align: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    transition: 1s;
    transition-property: transform background-color;
    transform: translate(-100%, 100%);
    background-color: greenyellow;
}

.btn:hover::before {
    transform: translate(0%, 0%);
}

.btn::after {
    content: "Hoverable";
    text-align: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    transition-property: transform background-color;
    align-items: center;
    display: flex;
    position: absolute;
    transition: 1s;
    background-color: gray;
}

.btn:hover::after {
   transform: translate(100%, -100%);
}