目を引く！コピペで使えるリンクアニメーション5選

<div class="button-group-vertical">
  <a href="#" class="btn-basic">シンプルボタン</a>
</div>

.button-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 16px; /* ボタンの上下間隔 */
  align-items: flex-start; /* 左寄せ。中央にしたい場合は center に変更 */
}

.btn-basic, .btn-slide {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000;
  font-family: sans-serif;
  width: fit-content; /* コンテンツ幅に調整。幅を揃えたい場合は指定してもOK */
}

/* シンプルボタン */
.btn-basic {
  background-color: #fff;
  color: #000;
  transition: all 0.3s ease;
}
.btn-basic:hover {
  background-color: #000;
  color: #fff;
}

<div class="button-group-vertical">
  <a href="#" class="btn-slide"><span>アニメ付きボタン</span></a>
</div>

.button-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 16px; /* ボタンの上下間隔 */
  align-items: flex-start; /* 左寄せ。中央にしたい場合は center に変更 */
}

.btn-slide {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000;
  font-family: sans-serif;
  width: fit-content; /* コンテンツ幅に調整。幅を揃えたい場合は指定してもOK */
}

/* スライドアニメーションボタン */
.btn-slide {
  position: relative;
  overflow: hidden;
  color: #000;
  background: #fff;
  transition: color 0.3s ease;
}

.btn-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #000;
  transition: left 0.3s ease;
  z-index: 0;
}

.btn-slide:hover::before {
  left: 0;
}

.btn-slide span {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.btn-slide:hover span {
  color: #fff;
}

<a href="#" class="btn-slide-text" data-text="リンクボタン"><span>リンクボタン</span></a>

.btn-slide-text {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 48px;
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
  line-height: 48px;
}

/* 中の span（通常テキスト）を上にスライド */
.btn-slide-text span {
  display: block;
  transition: transform 0.3s ease;
}

/* 疑似要素で下から表示するテキスト */
.btn-slide-text::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* ホバー時：どちらも上下にスライド */
.btn-slide-text:hover span {
  transform: translateY(-100%);
}

.btn-slide-text:hover::before {
  transform: translateY(-100%);
}

<a href="#" class="underline-link">リンクテキスト</a>

/* 共通のリンクスタイル */
.underline-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-family: sans-serif;
}

/* アンダーラインの基本設定 */
.underline-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease; /* 通常のホバーアニメーション */
}

/* ホバー時のアンダーラインが左から右に広がるアニメーション */
.underline-link:hover::after {
  width: 100%;
}

<a href="#" class="slide-arrow-link">テキストリンク</a>

.slide-arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 1.1em;
  padding-right: 2em;
  /* overflow: hidden; ← 擬似要素の範囲を制限するため下でwrapを作ります */
}

/* 擬似的なarrow-wrap */
.slide-arrow-link::before,
.slide-arrow-link::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1em;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.4,1.7,.6,1), opacity 0.2s;
  display: inline-block;
}

/* wrapの位置を再現 */
.slide-arrow-link::before,
.slide-arrow-link::after {
  right: 0.2em;
  margin-left: 0.2em;
  /* 右端に配置 */
  transform: translateY(-50%);
}

/* 矢印（→）の描画 */
.slide-arrow-link::before,
.slide-arrow-link::after {
  content: '→';
  color: #333;
  opacity: 1;
}

/* 初期状態：afterは左に隠れてる */
.slide-arrow-link::after {
  opacity: 0;
  transform: translateY(-50%) translateX(-120%);
}

/* hover時：beforeは右に消え、afterは左から現れる */
.slide-arrow-link:hover::before {
  opacity: 0;
  transform: translateY(-50%) translateX(120%);
}
.slide-arrow-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0%);
}