JSFiddle - React, Tailwind, and code Playground

HTML

<button>
  <span class="arrow">--></span>
  <span class="text">Hello</span>
</button>

CSS

button {
  background-color: red;
  border: none;
  padding: 1rem;
  overflow: hidden;
  position: relative;
}
.arrow {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(-30px);
  transition: 0.4s;
}
button:hover .arrow {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

.text {
  visibility: visible;
  opacity: 1;
  transition: 0.4s;
  display: inline-block;
}
/* hide button on hover */
button:hover .text {
  visibility: hidden;
  opacity: 0;
  transform: translateX(30px);
}