CSSだけで実装！魅力的なリンクアニメーション4選-後編-

CSS、JavaScript

リンクやボタンにアニメーションを加えるだけで、サイト全体の印象は一気に洗練されます。今回はCSSだけで手軽に実装できるリンクアニメーションを4つ厳選してご紹介します。

どれもコピペで使えるシンプルなコードながら、動きがあることでUXがぐっと向上します。初心者の方でも扱いやすく、ちょっとしたカスタマイズでオリジナリティも出せるので、ぜひ実際に動かしながら取り入れてみてください。

目を引く！コピペで使えるリンクアニメーション5選
Webサイトに動きと個性をプラス！CSSだけで実装できる、おしゃれなLinkアニメーションを5つ厳選しました。初心者でも安心！コピペで使えるコードと詳しい解説付き。
kmnmc.com
2025.04.21

シンプルなカラー下線ボタン

ホバーするとテキスト下に線がスーッと伸びる、定番ながら美しいアニメーション。
シンプルでどんなデザインにも馴染み、ナビゲーションや本文中のリンクにも使いやすいです。

コード

HTML

<a href="#" class="color-underline">リンクボタン</a>

CSS

.color-underline {
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  padding-bottom: 8px; /* 下線のスペース */
}

/* ベースの下線（グレー） */
.color-underline::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: #ccc;
  z-index: 0;
}

/* アニメーションするカラー下線（青） */
.color-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: #0074d9;
  z-index: 1;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

/* ホバー時にカラー下線が左から右へ伸びる */
.color-underline:hover::after,
.color-underline:focus::after {
  width: 100%;
}

このアニメーションの特徴

  • ::after 擬似要素で下線を作成
  • transition で滑らかな動きを実現

カスタマイズのヒント

  • 線の色は background-color で調整可能
  • 太さは height を変更
  • スピードは transition: all 0.3s ease; の時間部分で変えられます

このアニメーションを使うには、リンクに display: inline-block; を指定する必要があります。
inline のままだとアニメーションが効かないので注意！

サンプル

See the Pen link06 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

斜め回転アニメーションボタン

次は、ホバー時にボタン全体が斜めに回転するユニークなバリエーションです。
動きが加わることで、よりインタラクティブな印象を与えます。

コード

HTML

<a href="#" class="diagonal-rotate-btn">
  Linkボタン<span class="arrow">→</span>
</a>

CSS

.diagonal-rotate-btn {
  display: inline-flex;
  align-items: center;
  color: black;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  padding: 8px 16px;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  transform-origin: center center; /* 中心を基準に回転 */
  cursor: pointer;
}




.diagonal-rotate-btn .arrow {
  margin-left: 8px;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  display: inline-block;
}

/* ホバー時にボタン全体を中心を軸に斜めに回転 */
.diagonal-rotate-btn:hover,
.diagonal-rotate-btn:focus {
  transform: rotate(-12deg);
}

/* ホバー時に矢印も少し右に動かす */
.diagonal-rotate-btn:hover .arrow,
.diagonal-rotate-btn:focus .arrow {
  transform: translateX(6px);
}

このアニメーションの特徴

  • transform: rotate() で回転
  • 矢印は別要素を使ってスライドさせている

カスタマイズのヒント

  • 傾きの角度は rotate(-3deg) などで調整可能
  • 矢印のサイズや色は ::after の content や color プロパティで変更できます

ボタンに position: relative; を指定しないと、矢印の位置がずれることがあります。
矢印は absolute で配置されているため、親要素の位置基準を忘れずに。

サンプル

See the Pen Link09 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

アンダーライン＋矢印アニメーションボタン

下線が伸びるだけでなく、右側の矢印も一緒に動く複合的なアニメーションです。
「次へ」「詳細を見る」など、アクションを促すリンクにぴったりです。

コード

HTML

<a href="#" class="arrow-underline">
    <span class="text">リンクボタン</span>
    <span class="arrow"></span>
  </a>

CSS

.border-box {
  position: relative;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 16px; /* 左右の余白 */
  padding-left: 20px;
}

/* グレーのベースライン */
.border-box::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: #ccc;
  z-index: 0;
  pointer-events: none;
}

/* 青いアニメーションライン（初期10%、ホバーで100%） */
.border-box::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 5%;
  height: 3px;
  background: #0074d9;
  z-index: 1;
  pointer-events: none;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

/* ホバー時に青ラインが左から右へ伸びる */
.border-box:hover::after {
  width: 100%;
}

.arrow-underline {
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* テキストと矢印を左右に分ける */
  width: 100%; /* 親幅いっぱいに */
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* テキスト部分 */
.arrow-underline > span.text {
  flex-grow: 1;
}

/* 矢印部分 */
.arrow {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 12px;
  flex-shrink: 0;
}

.arrow::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #0074d9;
  border-bottom: 2px solid #0074d9;
  transform: rotate(-45deg);
  position: absolute;
  top: 4px;
  left: 3px;
  transition: border-color 0.3s;
}

/* ホバーで矢印色も変化 */
.border-box:hover .arrow::before {
  border-right-color: #005fa3;
  border-bottom-color: #005fa3;
}

.arrow {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 12px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1); /* アニメーション */
}

.border-box:hover .arrow,
.arrow-underline:hover .arrow {
  transform: translateX(12px); /* 右に12px移動 */
}

このアニメーションの特徴

  • ::after でアンダーラインを制御
  • 矢印部分は span などで分けてアニメーション制御

カスタマイズのヒント

  • アンダーラインの伸び方向は transform-origin を変えることで反転可能
  • 矢印の出現速度や動きも transition-delay で調整可能は transition: all 0.3s ease; の時間部分で変えられます

文字と矢印を別要素に分けるため、HTML構造が少し複雑に見えますが、CSS側でしっかり役割を分けて考えると理解しやすくなります。

サンプル

See the Pen Link08 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

応用パターン：より個性的な動きを実現

最後は、複数のエフェクトを組み合わせた応用的なアニメーション。
文字や線の動き、アイコンのスライドなど、より個性的な演出が可能です。

コード

HTML

<a href="#" class="shiny-btn">リンクボタン</a>

CSS

.shiny-btn {
  position: relative;
  display: inline-block;
  padding: 12px 32px;
  color: #fff;
  background: #384878; /* ←ここで背景色を指定 */
  border: none;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s;
}

/* ホバーで背景色を変えたい場合 */
.shiny-btn:hover {
  background: #5a6bb5; /* 好きな色に変更 */
}

/* キラッと光るエフェクト */
.shiny-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -125%;
  width: 100%;
  height: 100%;
   background: rgba(255,255,255,0.6); /* 白の半透明などお好みで */
  /*background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );*/
  transform: skewX(-20deg);
  transition: left 0.6s cubic-bezier(.4,1.7,.6,1);
  pointer-events: none;
  z-index: 2;
}

.shiny-btn:hover::before {
  left: 120%;
}

このアニメーションの特徴

  • 複数のtransformやopacityで段階的な動き
  • 要素の構造とアニメーションの順序がポイント

カスタマイズのヒント

  • 順序の調整は transition-delay を駆使して行うと滑らかに
  • 個別の動きを調整したいときは、要素ごとにクラスを分けて制御

一見複雑に見えますが、基本はシンプルなアニメーションの組み合わせです。まずは1つずつ動作を確認しながら進めましょう。

サンプル

See the Pen link05 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

まとめ

この記事では、CSSだけで実現できるリンクアニメーション4選をご紹介しました。
どれもコピペで導入でき、カスタマイズ次第でオリジナル性を出せるのがポイントです。

また、読者の操作を自然に促すリンク演出は、サイトの信頼感や回遊率アップにもつながります。

さらに、アニメーションが苦手なユーザーへの配慮として、以下のようなメディアクエリを使って、アニメーションを無効化することもできます。

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

ユーザー体験を大事にしつつ、演出で魅せる。そんなCSSの楽しさを、あなたのサイトでもぜひ体感してみてください。

タイトルとURLをコピーしました