【CSSで実装できる】ホバーエフェクト付きボタン（hover）の作り方！

ホバーとは？

Webサイト制作において、ホバー（hover）とは「マウスカーソルを合わせた時に起こる変化」のことを言います。また、マウスオーバーなどの呼び方もあります。

＜ホバーエフェクトの例＞

• ボタンの色が変わる
• 文字の色が変わる

本記事では『CSSで実装可能なボタンエフェクト』を厳選して紹介します。

ホバーボタンの作り方

基本のボタン

Button

<a href="#" class="button">ボタン</a>

.button {
　display: block;
　width: 240px;
　height: 60px;
　line-height: 60px;
　margin: 0 auto;
　font-size: 18px;
　text-align: center;
　letter-spacing: .2em;
　text-indent: .2em;
　text-decoration: none;
　background: #fca9cc;
　color: #fff;
}

aタグを用いたシンプルなボタンのHTMLとCSSを用意しました。

このボタンをベースにして、ホバーエフェクトを追加していきます。

ホバーエフェクト

.button:hover {
}

このように、aタグセレクタ「.button」の横に「:hover」を追加します。
この中で、ホバーをした際に変化させたい内容を記述します。

まずはシンプルに、ホバーでボタンの色を変更してみましょう。

ボタンの色を変更する（カラーチェンジ）

Button

.button:hover {
　background: #cd0e59;
}

ボタンの背景色を濃いピンク色に指定しました。マウスカーソルをボタンの上に置くことで、ホバーエフェクトが起きます。

CSSで実装できるホバーボタン一覧

See the Pen
Hover Button Effects by homari (@homariweb)
on CodePen.

ご参考にどうぞ！