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

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

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

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

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

ホバーで動くボタン

背景が少しずれるボタン

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.

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

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

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

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