JSFiddle - React, Tailwind, and code Playground

HTML

<button><span class="normal">Hover over me!</span><span class="flipped">Some flipped text!</span></button>

CSS

button {
    background: yellow;
    width: 500px;
    height: 50px;
    margin: 230px;
    transition: transform .8s ease-in-out, color .75s;
    position: relative;
}

button>span {
    display: inline-block;
    transition: opacity .8s;
    position: absolute;
    width: 500px;
    top: 15px;
    left: 0;
}

button>.flipped {
    opacity: 0;
    transform: rotate(180deg);
}

button:hover {
    transform: rotate(180deg);
}

button:hover>.normal {
    opacity: 0;
}

button:hover>.flipped {
    opacity: 1;
}