CSSで作るホバーで動くボタン・リンクデザイン集【コピペOK】

他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。

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

この記事では、背景が動くボタン・矢印付きリンク・下線アニメーションなどすぐに使えるスタイルをまとめて紹介します。

ホバーアニメーションとは？

CSSのホバーアニメーションとは、マウスを乗せたときに見た目を変化させる演出のことです。

例えば

• 色を変える
• 背景を広げる
• 下線を伸ばす
• 矢印を動かす

といった表現があります。

JavaScriptを使わなくても、transitionやtransformだけで実装できるものが多く、初心者でも導入しやすいのが特徴です。

動きを加える基本知識として、CSSアニメーションやなめらかに動かすTransitionの使い方を押さえておくとより理解が深まります。

ホバーで動くボタン

背景が少しずれるボタン

シンプルながら動きを感じられるデザインです。

ブログの続きを読むボタンやお問い合わせボタンに向いています。

See the Pen 動くボタン｜背景が少しずれるボタン by Turicco (@Turicco) on CodePen.

背景が広がるボタン

中央から全体に広がる

ホバー時の変化が大きく、クリックを促したい場所におすすめです。

特に

• 資料請求
• 商品購入
• お問い合わせ

などCTAボタン向きです。

See the Pen 動くボタン｜中央から全体に広がる by Turicco (@Turicco) on CodePen.

中央から縦全体に広がる

See the Pen 動くボタン｜中央から縦に広がる by Turicco (@Turicco) on CodePen.

中央から左右に広がる

横方向への動きが強調されるため、スタイリッシュな印象になります。

企業サイトやポートフォリオサイトとの相性が良いデザインです。

See the Pen 動くボタン｜中央から横に広がる by Turicco (@Turicco) on CodePen.

中央から放射状に広がる

See the Pen 動くボタン｜中央から放射状に広がる by Turicco (@Turicco) on CodePen.

背景がスライドするボタン

左からスライド

See the Pen 動くボタン｜左からスライド by Turicco (@Turicco) on CodePen.

右からスライド

See the Pen 動くボタン｜右からスライド by Turicco (@Turicco) on CodePen.

斜めにスライド

See the Pen 動くボタン｜斜めにスライド by Turicco (@Turicco) on CodePen.

上から下へスライド

See the Pen 動くボタン｜上から下へスライド by Turicco (@Turicco) on CodePen.

下から上へスライド

See the Pen 動くボタン｜下から上へスライド by Turicco (@Turicco) on CodePen.

流れる背景アニメーション

流れる背景（左から右）

See the Pen 動くボタン｜流れる背景（左から右） by Turicco (@Turicco) on CodePen.

流れる背景（右から左）

See the Pen 動くボタン｜流れる背景（右から左） by Turicco (@Turicco) on CodePen.

流れる背景（上から下）

See the Pen 動くボタン｜流れる背景（上から下） by Turicco (@Turicco) on CodePen.

流れる背景（下から上）

See the Pen 動くボタン｜流れる背景（下から上） by Turicco (@Turicco) on CodePen.

下線アニメーションのリンク

テキストリンクを目立たせながらも、派手になりすぎない人気のデザインです。

最近の企業サイトやサービスサイトでもよく使われています。

下線が伸びるリンク

テキストリンクを目立たせながらも、派手になりすぎない人気のデザインです。

最近の企業サイトやサービスサイトでもよく使われています。

中央から左右へ広がる

洗練された印象。ナビゲーション向き。

See the Pen 動くボタン｜中央から左右に下線が伸びる by Turicco (@Turicco) on CodePen.

左から右へ伸びる

自然な動きで読みやすい。記事内リンク向き。

See the Pen 動くボタン｜左から右に下線が伸びる by Turicco (@Turicco) on CodePen.

おしゃれな下線＋矢印リンク

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

下線矢印リンク（ホバーで動くデザイン）

See the Pen 動くボタン｜下線矢印リンク by Turicco (@Turicco) on CodePen.

右矢印リンク（テキスト横にスライド）

See the Pen 動くボタン｜右矢印リンク by Turicco (@Turicco) on CodePen.

ボタン＋右矢印

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

ボタン＋ >矢印

See the Pen トップページ作成｜リンクボタン（>） by Turicco (@Turicco) on CodePen.

ボタン＋小さな矢印

See the Pen 動くボタン｜角丸ボタン＋小矢印 by Turicco (@Turicco) on CodePen.

このボタンスタイルは、Cocoonサイト型トップページのDEMOページで導入しています。

ホバーアニメーションを使う際の注意点

動かしすぎない

アニメーションは目立ちますが、多用すると逆に読みにくくなります。

重要なリンクやボタンだけに使うのがおすすめです。

スマホではホバーが発生しない

スマートフォンではホバー操作がないため、PC向け演出として考えましょう。

アニメーション速度は0.3〜0.5秒がおすすめ

長すぎるとストレスになります。

迷ったらtransition: .3s;から始めると失敗しにくいです。

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

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

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

また、サイト作りに役立つ素材として見出しやボックスデザインも紹介しています。気に入ったスタイルがあればぜひご自身のサイトに取り入れてみてください。