JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn">
<div class="up">Normal</div>
<div class="down">Hover</div>
</button>

<div class="btn">
<div class="up">Normal</div>
<div class="down">Hover</div>
</div>

CSS

.btn{
    display: block;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    width: 150px;
    height: 50px;
    overflow: hidden;
    text-align: center;
    font: 12px arial;
    border: 0;
    padding: 2;
    border: 1px solid #fff;
    position: relative;
}

.up, .down {
    height: 50px;
    line-height: 50px;
    position: absolute;
    width: 100%;
    -webkit-transition: top .3s ease;
    -moz-transition: top .3s ease;
    -o-transition: top .3s ease;
    transition: top .3s ease;
}

.up { background-color: #f00; color: #00f; top: 0;}
.down { background-color: #00f; color: #f00; top: 50px;}

.btn:hover {
    border: 1px solid #000;
}

.btn:hover .up{
    top: -50px;
}

.btn:hover .down{
    top: 0;
}