<div class="bhe-09__wrapper">
  <button class="bhe-09__btn">
    <span class="bhe-09__front">Hover Me</span>
    <span class="bhe-09__back">Flipped!</span>
  </button>
</div>

.bhe-09__wrapper {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-09__wrapper {
  perspective: 600px;
  display: inline-block;
}
.bhe-09__btn {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background: transparent;
  border: none;
}
.bhe-09__front,
.bhe-09__back {
  display: block;
  padding: 12px 32px;
  border-radius: 8px;
  backface-visibility: hidden;
}
.bhe-09__front {
  background: #ff6c8a;
  color: #fff;
}
.bhe-09__back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7c6cff;
  color: #fff;
  transform: rotateX(180deg);
}
.bhe-09__wrapper:hover .bhe-09__btn {
  transform: rotateX(180deg);
}