MENU

【CSS】ホバーで色反転するボタンの正しい書き方——カスタムプロパティで保守性を上げる

WEB制作
  • URLをコピーしました！

ホバーで背景色とテキスト色が反転するボタン、実装したことありますか？

一見シンプルな動作ですが、書き方によって後から「バリアント追加のたびにホバーも書く」負債になるか、「初期色を宣言するだけでホバーがついてくる」設計になるかが決まります。

この記事では3つの実装パターンを比較しながら、CSSカスタムプロパティを活かした保守しやすい書き方を解説します。

目次

❌ パターン1：色を直書き

See the Pen ❌ パターン1：色を直書き by ito web制作 (@ito-web) on CodePen. 

.c-btn {
  background-color: #1a56db;
  color: #ffffff;
}

@media (any-hover: hover) {
  .c-btn:hover {
    background-color: #ffffff;
    color: #1a56db;
  }
}

デメリット
・色を変えるとき、通常・ホバー両方の計4箇所を修正しなければならない
・同じ色の値が複数箇所に散らばり、変更漏れが起きやすい
・バリアント（.c-btn--secondaryなど）を追加するたびにホバーも別途書く必要がある

🙂 パターン2：カスタムプロパティ使用（微妙）

See the Pen 🙂 パターン2：カスタムプロパティ使用（惜しい） by ito web制作 (@ito-web) on CodePen. 

:root {
  --color-primary: #1a56db;
  --color-secondary: #639922;
  --color-white: #ffffff;
}

.c-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
}

@media (any-hover: hover) {
  .c-btn:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
  }
}

/* バリアントごとにこれが必要になる… */
.c-btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

@media (any-hover: hover) {
  .c-btn--secondary:hover {
    background-color: var(--color-white);
    color: var(--color-secondary);
  }
}

カスタムプロパティを導入したことで色の一元管理はできていますが、まだ課題が残ります。

デメリット
・バリアントを作るとき、ホバーも別途書く必要がある
・コンポーネントが増えるほど、ホバー記述が増殖していく

👍 パターン3：ローカル変数で入れ替え

See the Pen Untitled by ito web制作 (@ito-web) on CodePen. 

:root {
  --color-primary: #1a56db;
  --color-secondary: #639922;
  --color-white: #ffffff;
}

.c-btn {
  --btn-bg: var(--color-primary);
  --btn-txt: var(--color-white);

  background-color: var(--btn-bg);
  color: var(--btn-txt);
  transition: background-color 0.2s, color 0.2s;
}

@media (any-hover: hover) {
  .c-btn:hover {
    --btn-bg: var(--color-white);
    --btn-txt: var(--color-primary);
  }
}

/* これだけでホバーも完成する */
.c-btn--secondary {
  --btn-bg: var(--color-secondary);
}

background-color や color のプロパティ自体はそのままに、カスタムプロパティの値だけをホバーで上書きするのがポイントです。

メリット
・プロパティ宣言の重複がなくてすっきり読める
・意図が明確：「bgとtxtを入れ替えている」とひと目でわかる
・バリアントは初期色を宣言するだけで、ホバーが自動でついてくる

まとめ比較

色変更の手間バリアント追加可読性
❌ 直書き4箇所修正ホバーも毎回必要低
🙂 カスタムプロパティ（惜しい）1箇所で済むホバーも毎回必要中
👍 ローカル変数で入れ替え1箇所で済む初期色だけでOK高
WEB制作
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次