表示するテキストが切り替わる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>@charset "utf-8";

/*表示するテキストが切り替わる*/

.btntextchange {
  /*テキストの基点とするためrelativeを指定*/
  position: relative;

  /*ボタンの形状*/
  border: 1px solid #555;
  border-radius: 25px;
  min-width: 210px;
  text-align: center;
  display: inline-block;

  margin: 20px 0;
  text-decoration: none;
  outline: none;
  font-size: max(14px, 2vw);
  white-space: nowrap;
  width: max(150px, 40vw);

  /*ボタンの形状*/
  padding: 20px;
  color: #333;

  /*アニメーションの指定*/
  transition: all 0.2s;
}

/*hoverした際の変化*/
.btntextchange:hover {
  background: linear-gradient(to right, #6551ff 0%, #00e2fa 80%, #00e2fa 100%);
  color: #fff;
  border: none;
}

/*hoverした際の変化*/
.btntextchange:hover::before {
  background: #333;
  color: #fff;
}

.btntextchange span {
  /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*アニメーションの指定*/
  transition: all 0.5s;
  /*ブロック要素にしてテキスト折り返しなし*/
  display: block;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2) {
  opacity: 0; /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1) {
  opacity: 0; /*透過0に*/
}

.btntextchange:hover span:nth-child(2) {
  opacity: 1; /*不透明に*/
}

/*========= レイアウトのためのCSS ===============*/

body {
  width: 100%;
  height: 100vh;
  vertical-align: middle;
  padding: 30px 0;
  text-align: center;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  background-image: linear-gradient(
    103.3deg,
    rgba(252, 225, 208, 1) 30%,
    rgba(255, 173, 214, 1) 55.7%,
    rgba(162, 186, 245, 1) 81.8%
  );
}

/*ボタンの配置*/
.btn-position {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  margin: 0 0 10px 0;
}</style>
</head>
<body>
<body>
<div class="btn-position">
<a href="#" class="btntextchange">
<span>About</span>
<span>私たちについて</span>
</a>
</div>
<script>
</script>
</body>
</html>

/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

@charset "utf-8";

/*表示するテキストが切り替わる*/

.btntextchange {
  /*テキストの基点とするためrelativeを指定*/
  position: relative;

  /*ボタンの形状*/
  border: 1px solid #555;
  border-radius: 25px;
  min-width: 210px;
  text-align: center;
  display: inline-block;

  margin: 20px 0;
  text-decoration: none;
  outline: none;
  font-size: max(14px, 2vw);
  white-space: nowrap;
  width: max(150px, 40vw);

  /*ボタンの形状*/
  padding: 20px;
  color: #333;

  /*アニメーションの指定*/
  transition: all 0.2s;
}

/*hoverした際の変化*/
.btntextchange:hover {
  background: linear-gradient(to right, #6551ff 0%, #00e2fa 80%, #00e2fa 100%);
  color: #fff;
  border: none;
}

/*hoverした際の変化*/
.btntextchange:hover::before {
  background: #333;
  color: #fff;
}

.btntextchange span {
  /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*アニメーションの指定*/
  transition: all 0.5s;
  /*ブロック要素にしてテキスト折り返しなし*/
  display: block;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2) {
  opacity: 0; /*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1) {
  opacity: 0; /*透過0に*/
}

.btntextchange:hover span:nth-child(2) {
  opacity: 1; /*不透明に*/
}

/*========= レイアウトのためのCSS ===============*/

body {
  width: 100%;
  height: 100vh;
  vertical-align: middle;
  padding: 30px 0;
  text-align: center;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  background-image: linear-gradient(
    103.3deg,
    rgba(252, 225, 208, 1) 30%,
    rgba(255, 173, 214, 1) 55.7%,
    rgba(162, 186, 245, 1) 81.8%
  );
}

/*ボタンの配置*/
.btn-position {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  margin: 0 0 10px 0;
}