<div class="button-wrapper">
    <a href="#" class="cube">
        <div class="front">
            Front Side
        </div>
        <div class="back">
            Back Side
        </div>
    </a>
    <hr class="spacer">
    <a href="#" class="horizontal-cube">
        <div class="left">
            Left Side
        </div>
        <div class="right">
            Right Side
        </div>
    </a>
</div>

/* vertical */
.cube{
    color: var(--red);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--copy-font-family);
    width: 200px;
    height: 50px;
    transition: transform 0.25s;
    transform-style: preserve-3d;
}
.cube:hover{
    transform: rotateX(90deg);
}
.front, .back{
    display: grid;
    place-items: center;
    height: 50px;
}
.front{
    background: var(--yellow);
    transform: translateZ(25px);
}
.back{
    background: var(--orange);
    color: var(--yellow);
    transform: rotateX(-90deg) translateZ(-25px);
}
/* horizontal */
.horizontal-cube{
    display: flex;
    color: var(--red);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--copy-font-family);
    width: 200px;
    height: 50px;
    transition: transform 0.25s;
    transform-style: preserve-3d;
}
.horizontal-cube:hover{
    transform: rotateY(-90deg);
}
.left, .right{
    display: grid;
    place-items: center;
    width: 200px;
    height: 50px;
    position: absolute;
}
.left{
    background: var(--yellow);
    transform: translateZ(100px);
}
.right{
    background: var(--orange);
    color: var(--yellow);
    transform: rotateY(90deg) translateZ(100px);
}