【CSS】マウスを乗せたとき（ホバー）ボタンを明るく・暗くする方法を解説

ホバーしたときにボタンの色をふわっと明るく・暗くしたい、そんな場面はコーディングでよくありますよね。CSSの filter: brightness() を使えば、画像でもボタンでも手軽に実装できます。この記事ではその方法をサクッと解説します。

実装イメージ

See the Pen Untitled by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

/* 明るくするとき */
.button1:hover{
  filter: brightness(1.50); 
}

/* 暗くするとき */
.button2:hover{
  filter: brightness(0.5); 
}

brightness() の値が 1より大きいと明るく、0に近づくほど暗くなります。今回は分かりやすいよう極端な数値にしていますが、実際は 1.1 〜 1.3（明るく）、0.7 〜 0.9（暗く）くらいが自然な見た目になることが多いです。

またホバー時に transition を指定しておくと、じわっとなめらかに変化します。

.button {
  transition: filter 0.3s ease;
}

filter は要素全体に適用されるため、画像の上にテキストが乗っている場合はテキストにも効果がかかります。テキストの色が変わるのが気になる場合は、背景画像に brightness をかけるのではなく、テキストと背景を別の要素に分けて対応するのがおすすめです。

filter プロパティはIEでは非対応です。現在はIEのシェアがほぼゼロになっているので基本的に問題ありませんが、古い環境向けの対応が必要な案件では注意してください。

filter: brightness() はシンプルなコードでホバーエフェクトを作れる便利なプロパティです。数値一つで明るさが変えられるので、デザインに合わせて微調整しながら使ってみてください。