マウスホバーで文字が変化するボタン

<div class="ch-button">
  <a href="#">
    <p class="before-text">標準時の文言</p>
    <p class="after-text">ホバー時の文言</p>
  </a>
</div>

/*** ボタン全体 ***/
div.ch-button{
  position: relative; /*子要素の基準位置*/
  width: 20rem;
  height: 3rem;
  background: #3EACA8; /*ボタンの色*/
}

/*** ボタン内の文言共通 ***/
.ch-button p{
  display: flex;
  align-items: center;
  justify-content: space-around;
  transition: .4s;
  /*位置・大きさをボタンにあわせる*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: initial;
}

/*** 2つ目の文言は標準時隠しておく ***/
.after-text{
  visibility: hidden; /*非表示*/
  opacity: 0; /*透明*/
}

/*** ホバー時に文言を入れ替え ***/
.ch-button:hover .before-text{
  visibility:hidden; /*非表示*/
  opacity: 0; /*透明*/
}
.ch-button:hover .after-text{
  visibility: visible; /*表示*/
  opacity: 1; /*不透明*/
}

/*** 装飾用 ***/
.ch-button{
  box-shadow: 0 0 4px rgb(0 0 0 /60%);
  border-radius: 6px;
  margin: 1em auto;
}
.ch-button a{
  text-decoration: none;
  color: #fff;
}