ホバーでテキストがくるっと回転するボタン

少し前からよく見る気がして、こちらも練習で実装してみました。
一文字ずつ回転にしても良い気がするので、チャレンジしてみます。

タッチデバイスではクリックで発火します。

<a class="c-btn-1" ontouchstart >
    <div class="c-btn-1__txt-wrap">
        <span class="c-btn-1__txt" data-btn-txt="もっと見る">もっと見る</span>
        <span class="c-btn-1__txt">もっと見る</span>
    </div>
</a>
<!-- [/c-btn-1] -->

.c-btn-1 {
  display: block;
  margin-inline: auto;
  width: min(80%, 400px);
  padding: 15px;
  text-align: center;
  border-radius: 50em;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  box-shadow: 4px 4px 10px #d3d3d3, -4px -4px 10px #ededed;
  cursor: pointer;
}

.c-btn-1__txt-wrap {
  display: block;
  position: relative;
  overflow: hidden;
}

.c-btn-1__txt {
  display: block;
  transition: transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .c-btn-1:hover .c-btn-1__txt {
    transform: translateY(-100%);
  }
}

.c-btn-1__txt:nth-of-type(2) {
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  transition: transform 0.3s;
}