複数トランジションを使ったCSSボタンホバーエフェクト

複数プロパティのボタンホバー

よく作り込まれたボタンホバーエフェクトは、満足感のあるプロフェッショナルなインタラクションを作成するために複数のプロパティを組み合わせます。最も一般的な組み合わせは、背景色の変化、わずかなスケール/リフト、シャドウの強化です。

CSSコード

.btn {
  background-color: #3b82f6;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: background-color 0.2s ease-in-out,
              transform 0.2s ease-out,
              box-shadow 0.2s ease-in-out;
}

.btn:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

エフェクトの分解

1. 背景色が暗くなり、インタラクティブ性を示す
2. **transform translateY(-2px)**がボタンをわずかに持ち上げ、奥行きを作る
3. box-shadowが拡大し色のついたティントが加わり、浮き上がりを演出
4. アクティブ状態でボタンが押し戻され、触覚的な感触が完成

なぜ異なるタイミング関数を使うのか？

transformはease-outを使用し、色とシャドウはease-in-outを使用しています。transformのease-outは上方向のリフトを応答性良く感じさせ（速い開始）、色のease-in-outはバランスの取れた対称的なトランジションを提供します。

持続時間の一貫性を保つ

3つのトランジションすべてが0.2sを使用しているため、一緒に開始・終了します。持続時間が不一致だと、一つのプロパティが他より先に終了する不調和な感覚が生まれます。