動きで魅せる！おしゃれな矢印リンク＆下線スライド・ホバーアニメーションボタン（CSS付き）

他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがかっこいい！」といった演出。どうやって作られているのか気になったことはありませんか？

実は、CSSだけで簡単に再現できるデザインが多く、少しの装飾やホバーアニメーションを加えるだけで、サイトの印象やクリック率を大きく変えることができます。

この記事では、矢印付きリンク・下線アニメーション・背景が広がるアニメーションボタンなど、すぐに使えるスタイルをまとめて紹介。サンプルコードはすべてコピペOKなので、ブログやサイトにすぐ取り入れて、自分のデザインに活かすことができます。

INDEX

おしゃれな矢印・下線付きリンク
ホバーで下線が伸びるリンク
1. 中央から左右に下線が広がるスタイル
2. 左から右に下線が伸びる
背景が広がる｜ホバーアニメーション
まとめ｜おしゃれホバーでサイトをアップデート

おしゃれな矢印・下線付きリンク

リンクテキストの横や下に矢印を追加したり、下線をアニメーションさせたりするだけで、クリックを誘導するデザインになります。

下線矢印リンク｜ホバーで動くおしゃれデザイン

テキスト下に細い矢印が走り、ホバーで動くデザイン。

See the Pen 下線矢印リンク｜ホバーで動く by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="arrow-link-underline">下線矢印リンク</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 中央寄せ */
  margin: 2em 0; /*上下・左右の余白*/
}

/* 下線矢印リンク */
.arrow-link-underline {
  --arrow-color: #333; /* 矢印の色 */
  position: relative;  /* 疑似要素の位置基準 */
  display: inline-block;
  padding: 0 2.5em .5em .5em; /* 右に矢印用の余白 */
  color: var(--arrow-color);  /* テキスト色 */
  text-decoration: none;      /* 下線を消す */
}

/* ホバー時も文字色を変えない */
.arrow-link-underline:hover {
  color: var(--arrow-color);
}

/* 下線矢印 */
.arrow-link-underline::before {
  content: ''; 
  position: absolute;
  left: 0; 
  bottom: 0;
  width: 100%; 
  height: 12px; 
  border-bottom: 1px solid var(--arrow-color); 
  border-right: 1px solid var(--arrow-color);
  transform: skewX(50deg); /* 矢印の形状 */
  transition: all .3s; /* ホバー時のアニメーション */
}

/* 下線矢印のアニメーション */
.arrow-link-underline:hover::before {
  left: 10%; /* ホバーで矢印が右にずれる */
}

当サイトのトップページでも採用。「どうやって作るか記事に書いてある？」と聞かれることが多いです。

右矢印リンク｜テキスト横にスライドする矢印

テキスト右に矢印、ホバーで矢印が右にスライド。

See the Pen 右矢印リンク｜テキスト横にスライドする矢印 by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="arrow-link-right">右矢印リンク</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 中央寄せ */
  margin: 2em 0; /*上下・左右の余白*/
}

/* 右矢印リンク */
.arrow-link-right {
  --arrow-color: #333;
  display: inline-flex; /* テキストと矢印を横並び */
  align-items: center; 
  color: var(--arrow-color); /* テキスト色 */
  text-decoration: none;
  position: relative; /* 疑似要素の位置基準 */
}

/* ホバー時も文字色を変えない */
.arrow-link-right:hover {
  color: var(--arrow-color);
}

/* 右矢印 */
.arrow-link-right::after {
  content: '';
  position: absolute;
  left: 100%; /* テキストの右端に配置 */
  width: 30px; 
  height: 10px; 
  border-bottom: 1px solid var(--arrow-color);
  border-right: 1px solid var(--arrow-color);
  transform: skewX(50deg); 
  transition: all .3s;
}

/* ホバーで矢印を右にスライド */
.arrow-link-right:hover::after {
  margin-left: 10px;
}

枠付きボタン＋右矢印｜クリックを誘導するボタン型リンク

ボタン型リンク＋右矢印が横にスライドするスタイル。

See the Pen 枠付きボタン＋右矢印 by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="arrow-btn-outline">枠付きボタン＋右矢印</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 中央寄せ */
  margin: 2em 0;      /* 上下余白 */
}

/* 枠付きボタン＋右矢印 */
.arrow-btn-outline {
  --arrow-color: #555; /* 枠線と矢印の色 */
  position: relative; 
  border: 1px solid var(--arrow-color); 
  color: var(--arrow-color); 
  text-decoration: none;
  padding: 8px 30px; 
  display: inline-block; 
  text-align: center; 
  transition: all .2s linear; /* ホバーアニメーション */
}

/* 右矢印 */
.arrow-btn-outline::before {
  content: '';
  position: absolute;
  top: 50%; /* ボタン中央に配置 */
  transform: translateY(-50%) skewX(50deg);
  right: -20px; /* ボタンの右外に配置 */
  width: 40px;
  height: 10px;
  border-bottom: 1px solid var(--arrow-color);
  border-right: 1px solid var(--arrow-color);
  transition: all .3s;
}

/* ホバー時のスタイル */
.arrow-btn-outline:hover {
  background: #999;
  border-color: #999;
  color: #fff;
}

.arrow-btn-outline:hover::before {
  right: -25px; /* ホバーで矢印を右に移動 */
}

角丸ボタン＋小矢印｜丸みで柔らかい印象

丸みのあるボタン＋矢印が右にスライド。

See the Pen 丸角ボタン＋小矢印｜丸みで柔らかい印象 by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="arrow-btn-rounded">丸角ボタン＋小矢印</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 中央寄せ */
  margin: 2em 0;      /* 上下余白 */
}

/* 丸角ボタン＋矢印 */
.arrow-btn-rounded {
  --arrow-color: #333; 
  display: inline-block; 
  border: 1px solid #b5b5ae; 
  border-radius: 99px; /* 丸角 */
  padding: 10px 50px 10px 20px; 
  color: var(--arrow-color); 
  text-decoration: none; 
  position: relative; 
  transition: .3s all;
}

/* 右矢印 */
.arrow-btn-rounded::after {
  content: '';
  position: absolute;
  right: 20px; 
  bottom: 50%; 
  transform: translateY(50%) skewX(45deg);
  width: 15px; 
  height: 3px; 
  border-bottom: 1px solid var(--arrow-color);
  border-right: 1px solid var(--arrow-color);
  transition: .3s all;
}

/* ホバー時 */
.arrow-btn-rounded:hover {
  background-color: #b5b5ae; 
  border-color: #b5b5ae; 
  color: #fff; 
}

.arrow-btn-rounded:hover::after {
  right: 15px; /* ホバーで矢印が左に少し移動 */
  border-color: #fff; /* ホバーで矢印の色を白に */
}

目次に戻る

ホバーで下線が伸びるリンク

ホバー時に下線がスライドして伸びるデザインで、動きのあるリンクになります。

中央から左右に下線が広がるスタイル

通常は下線非表示、ホバーで中央から両端に伸びる

See the Pen 中央から左右に下線が広がる by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="move-line">中央から左右に下線が伸びる</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 横中央揃え */
  margin: 2em 0;      /* 上下余白 */
}

/* 中央から下線 */
.move-line {
  text-decoration: none; /* 元の下線を消す */
  position: relative;    /* 擬似要素の基準 */
  color: #333;           /* テキスト色 */
  padding-bottom: 10px;  /* 下線用の余白 */
  font-weight: bold;     /* 文字を太字 */
  display: inline-block; /* 中央揃えに対応 */
}

.move-line::before {
  content: ""; 
  position: absolute;
  left: 50%; /* 中央スタート */
  bottom: 0; /* テキスト下に配置 */
  width: 0;  /* 初期は0 */
  height: 2px; /* 下線の太さ */
  background-color: #333; 
  transition: all 0.4s ease; /* アニメーション */
}

.move-line:hover::before {
  width: 100%; 
  left: 0; /* 左端から全幅に広がる */
}

/* 文字色はホバーで変えない */
.move-line:hover {
  color: inherit; /* 元の文字色を保持 */
}

左から右に下線が伸びる

左端から右にスーッと伸びる王道スタイル

See the Pen 左から右に下線が伸びる by Turicco (@Turicco) on CodePen.

コード見る

<div class="btn-container">
  <a href="#" class="move-line-left">左から右に下線が伸びる</a>
</div>

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 横中央揃え */
  margin: 2em 0;      /* 上下余白 */
}

/* 左から右に下線 */
.move-line-left {
  text-decoration: none; /* 元の下線を消す */
  position: relative;    /* 擬似要素の基準 */
  color: #333;           /* テキスト色 */
  padding-bottom: 10px;  /* 下線用の余白 */
  font-weight: bold;     /* 文字を太字 */
  display: inline-block; /* 中央揃え対応 */
}

.move-line-left::before {
  content: ""; 
  position: absolute;
  left: 0;  /* 左端スタート */
  bottom: 0; /* テキスト下に配置 */
  width: 0;  /* 初期幅0 */
  height: 2px; /* 下線の太さ */
  background-color: #333; 
  transition: all 0.4s ease; /* アニメーション */
}

.move-line-left:hover::before {
  width: 100%; /* ホバー時に全幅に広がる */
}

/* 文字色はホバーで変えない */
.move-line-left:hover {
  color: inherit; /* 元の文字色を保持 */
}

目次に戻る

背景が広がる｜ホバーアニメーション

See the Pen 広がる背景アニメーション by Turicco (@Turicco) on CodePen.

ここから紹介するボタンはすべて共通のベースCSSを使います。以下のコードをページに追加してから、個別のアニメーションCSSを組み合わせてください。

共通CSS

:root {
  --btn-color: #333; /* ボタンのカラーを設定 */
}

/* コンテナ（中央寄せや余白調整用） */
.btn-container {
  text-align: center; /* 中央寄せ */
  margin: 2em 0;
}

/* ボタンの基本スタイル */
.btn-common {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  width: 250px;
  border: 2px solid var(--btn-color);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

/* ボタン内テキスト */
.btn-common span {
  position: relative;
  z-index: 3;
  color: var(--btn-color);
  transition: color 0.2s ease;
}

/* ホバー・フォーカス時のテキスト色 */
.btn-common:hover span {
  color: #fff;
}

/* 背景アニメーションのベース設定 */
.btn-common::before {
  content: '';
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-out;
}

中央から全体に広がる

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-grow"><span>中央から全体に広がる</span></a>
</div>

/* 中央から全体に広がる */
.btn-grow::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(0); /* 最初は小さく縮んだ状態 */
  transform-origin: center; /* 中央から拡大 */
}
.btn-grow:hover::before {
  transform: scale(1); /* ホバーで全体に広がる */
}

中央から縦全体に広がる

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-stretch"><span>中央から縦全体に広がる</span></a>
</div>

/* 中央から縦全体に広がる */
.btn-stretch::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleY(0); /* 縦に縮んだ状態 */
  transform-origin: center; /* 中央から縦に拡大 */
}
.btn-stretch:hover::before {
  transform: scaleY(1); /* ホバーで縦に広がる */
}

中央から左右に広がる

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-spread"><span>中央から左右に広がる</span></a>
</div>

/* 中央から左右に広がる */
.btn-spread::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleX(0); /* 横に縮んだ状態 */
  transform-origin: center; /* 中央から横に拡大 */
}
.btn-spread:hover::before {
  transform: scaleX(1); /* ホバーで横に広がる */
}

中央から放射状に広がる

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-radial"><span>中央から放射状に広がる</span></a>
</div>

/* 中央から放射状に広がる */
.btn-radial::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 0; /* 最初は幅0 */
  height: 0; /* 最初は高さ0 */
  border-radius: 50%; /* 円形にする */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  transition: width 0.3s ease, height 0.3s ease; /* 幅と高さを滑らかに変化 */
}
.btn-radial:hover::before {
  width: 400px; /* ホバーで大きく広がる */
  height: 400px;
}

左からスライド

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-left"><span>左からスライド</span></a>
</div>

/* 左からスライド */
.btn-slide-left::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%; /* 最初は左の外に隠れる */
  transition: transform 0.3s ease; /* 滑らかに動く */
}
.btn-slide-left:hover::before {
  transform: translateX(100%); /* ホバーで右にスライド */
}

右からスライド

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-right"><span>右からスライド</span></a>
</div>

/* 右からスライド */
.btn-slide-right::before {
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%; /* 最初は右の外に隠れる */
  transition: transform 0.3s ease; /* 滑らかに動く */
}
.btn-slide-right:hover::before {
  transform: translateX(-100%); /* ホバーで左にスライド */
}

斜めにスライド

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-skew"><span>斜めにスライド</span></a>
</div>

/* 斜めにスライド */
.btn-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%; /* 最初は斜めに左の外に隠れる */
  background: var(--btn-color); /* ボタンの背景色 */
  width: 120%;
  height: 100%;
  transform: skewX(-25deg); /* 斜めに傾ける */
}
.btn-skew:hover::before {
  animation: skewanime 0.5s forwards; /* ホバーでアニメーション開始 */
}
@keyframes skewanime {
  100% {
    left: -10%; /* 斜めにスライドして表示 */
  }
}

上から下へスライド

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-top"><span>上から下へスライド</span></a>
</div>

/* 上から下へスライド */
.btn-slide-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 0; /* 最初は高さ0 */
  transition: height 0.3s ease; /* 高さを滑らかに変化 */
}
.btn-slide-top:hover::before {
  height: 100%; /* ホバーで下に広がる */
}

下から上へスライド

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-slide-bottom"><span>下から上へスライド</span></a>
</div>

/* 下から上へスライド */
.btn-slide-bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 0; /* 最初は高さ0 */
  transition: height 0.3s ease; /* 高さを滑らかに変化 */
}
.btn-slide-bottom:hover::before {
  height: 100%; /* ホバーで上に広がる */
}

流れる背景（左から右）

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-left"><span>流れる背景（左から右）</span></a>
</div>

/* 流れる背景（左から右） */
.btn-fill-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  transform: scaleX(0); /* 横に縮んだ状態 */
  transform-origin: right top; /* 右から開始 */
  transition: transform 0.3s ease-out; /* 滑らかに動く */
}
.btn-fill-left:hover::before {
  transform-origin: left top; /* 左から広がる */
  transform: scaleX(1); /* ホバーで横に広がる */
}

流れる背景（右から左）

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-right"><span>流れる背景（右から左）</span></a>
</div>

/* 流れる背景（右から左） */
.btn-fill-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color); /* ボタの背景色 */
  width: 100%;
  height: 100%;
  transform: scaleX(0); /* 横に縮んだ状態 */
  transform-origin: left top; /* 左から開始 */
  transition: transform 0.3s ease-out; /* 滑らかに動く */
}
.btn-fill-right:hover::before {
  transform-origin: right top; /* 右から広がる */
  transform: scaleX(1); /* ホバーで横に広がる */
}

流れる背景（上から下）

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-top"><span>流れる背景（上から下）</span></a>
</div>

/* 流れる背景（上から下） */
.btn-fill-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  transform: scaleY(0); /* 縦に縮んだ状態 */
  transform-origin: bottom; /* 下から開始 */
  transition: transform 0.3s ease-out; /* 滑らかに動く */
}
.btn-fill-top:hover::before {
  transform-origin: top; /* 上から広がる */
  transform: scaleY(1); /* ホバーで縦に広がる */
}

流れる背景（下から上）

コード見る

<div class="btn-container">
  <a href="#" class="btn-common btn-fill-bottom"><span>流れる背景（下から上）</span></a>
</div>

/* 流れる背景（下から上） */
.btn-fill-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--btn-color); /* ボタンの背景色 */
  width: 100%;
  height: 100%;
  transform: scaleY(0); /* 縦に縮んだ状態 */
  transform-origin: top; /* 上から開始 */
  transition: transform 0.3s ease-out; /* 滑らかに動く */
}
.btn-fill-bottom:hover::before {
  transform-origin: bottom; /* 下から広がる */
  transform: scaleY(1); /* ホバーで縦に広がる */
}

目次に戻る

まとめ｜おしゃれホバーでサイトをアップデート

今回は、CSSだけで作れる矢印リンク・下線アニメーション・背景が動くホバーボタンを紹介しました。

リンクやボタンに動きを加えることで、ユーザーの目線を集めやすくなり、クリック率やサイトの印象を簡単にアップさせることができます。

気に入ったスタイルがあれば、ぜひご自身のサイトに取り入れてみてください。

また、リンクやボタンに動きを加える基本知識として、CSSアニメーションの指定方法やTransitionの使い方を押さえておくとよりリッチな表現が可能です。

サイトに「動き」をつけるCSSアニメーション｜基本的な使い方と実例

Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...

【CSS】Transitionの使い方と実例｜ゆっくり変化するアニメーション（hover・フェード）

サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。その中でも CSSの「transitionトランジション」は、要素の状態変化をなめらかに...

目次に戻る

Comment 記事の感想を書き込んでいただけると幸いです

　コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

お問い合わせにあたり

カスタマイズに関するお問い合わせは、必ず対象のサイトURLをご入力ください【必須】
- サイトURLが記載されていない場合は検証ができないため、ご対応いたしかねます。
- 公開記事の内容以外（ソースコードの応用や反映されない原因の調査など）には対応できませんので、あらかじめご了承ください。

返信には数日～1週間ほどお時間をいただく場合があります。

コメント ※

名前 ※

メール ※

サイト

添付ファイルアップロードファイルの最大サイズ: 5 MB。画像, 音声, 動画, 文書, スプレッドシート, 対話型, テキスト, アーカイブ, コード, その他をアップロードできます。 Youtube、Facebook、Twitter および他サービスへのリンクは自動的にコメント内に埋め込まれます。ここにファイルをドロップ

日本語が含まれない内容は投稿できません。