JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="btn">
    <div class="btn__inner--show"><b>B</b>otão</div>
    <div class="btn__inner--hidden"><b>O</b>pção</div>
</div>

CSS

.btn, .btn__inner--show, .btn__inner--hidden {
  overflow: hidden;
  width: 100px; height: 32px;
  text-align: center;
}
.btn__inner--show, .btn__inner--hidden {
    transition: left 1s; position: relative;
    background: #4ae; display: inline-block;
    left: 0;
}
.btn__inner--hidden {
    background: #a4e; top: -37px; /* ??? */
    left: 100px;
}
.btn:hover .btn__inner--show {left: -100px;}
.btn:hover .btn__inner--hidden {left: 0px;}