技術

CSS Tips

ボタンホバーで背景色がスライドするアニメーション

疑似要素とtransformを組み合わせて、印象的なボタンホバーエフェクトを作成しましょう。

コーディング css animation

はじめに

ボタンのホバーエフェクトは、ユーザーとのインタラクションを視覚的に伝える重要な要素です。

この記事では、ホバー時に背景色が左から右へ現れ、ホバー解除時には右へ消えていくアニメーションをCSSだけで実装する方法を紹介します。

完成デモ

ボタンにマウスを乗せてみてください。背景色が左から右へスライドし、離すと右へ消えていきます。

プレビュー
HTML
<button class="demo-hover-btn">Hover me!</button>
CSS
.demo-hover-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #667eea;
  background: transparent;
  color: #667eea;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: color 0.3s ease;
  isolation: isolate;
}

.demo-hover-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
  z-index: -1;
}

.demo-hover-btn:hover {
  color: #fff;
}

.demo-hover-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

仕組みの解説

このアニメーションは、疑似要素::beforeとtransform: scaleX()を組み合わせて実現しています。

ポイントは以下の3つです：

1. **疑似要素で背景レイヤーを作成**
::beforeで背景色のレイヤーを作り、ボタン全体を覆うように配置します。

2. **scaleX(0)で初期状態を非表示に**
横方向のスケールを0にすることで、最初は見えない状態にします。

3. **transform-originで方向を制御**
ホバー時はleft（左から広がる）、非ホバー時はright（右へ消える）に設定することで、一方向に流れるようなアニメーションになります。

HTMLコード

<button class="hover-btn">Hover me!</button>

CSSコード

.hover-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #667eea;
  background: transparent;
  color: #667eea;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: color 0.3s ease;
  isolation: isolate; /* 新しいスタッキングコンテキストを作成 */
}

.hover-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
  z-index: -1;
}

.hover-btn:hover {
  color: #fff;
}

.hover-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

各プロパティの役割

position: relative

ボタンを基準点として設定し、疑似要素のposition: absoluteがボタン内で正しく配置されるようにします。

overflow: hidden

疑似要素がボタンの境界からはみ出さないようにクリップします。

inset: 0

top, right, bottom, leftすべてを0に設定するショートハンド。疑似要素がボタン全体を覆います。

transform: scaleX(0)

要素の横幅を0倍（非表示）にします。scaleX(1)で元のサイズに戻ります。

transform-origin

変形の基点を指定。rightなら右端を基点に、leftなら左端を基点にスケールします。

z-index: -1

疑似要素をボタンのテキストより後ろに配置し、テキストが見えるようにします。

isolation: isolate

新しいスタッキングコンテキストを作成します。これにより、z-index: -1の疑似要素がボタン内に留まります。

transform-originの切り替えがポイント

このアニメーションで最も重要なのは、ホバー時と非ホバー時でtransform-originを切り替えることです。

**非ホバー時**: transform-origin: right;
→ 右端を基点にscaleX(0)なので、右へ縮んで消える

**ホバー時**: transform-origin: left;
→ 左端を基点にscaleX(1)なので、左から広がって現れる

この切り替えにより、ホバーすると左から右へ、離すと右へ消える一方向のアニメーションが実現できます。

カラーバリエーション

背景色を変えるだけで、様々な雰囲気のボタンを作成できます。

プレビュー
HTML
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <button class="demo-hover-btn demo-hover-btn--green">Green</button>
  <button class="demo-hover-btn demo-hover-btn--orange">Orange</button>
  <button class="demo-hover-btn demo-hover-btn--pink">Pink</button>
</div>
CSS
.demo-hover-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #667eea;
  background: transparent;
  color: #667eea;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: color 0.3s ease;
  isolation: isolate;
}

.demo-hover-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
  z-index: -1;
}

.demo-hover-btn:hover {
  color: #fff;
}

.demo-hover-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.demo-hover-btn--green {
  border-color: #00b894;
  color: #00b894;
}

.demo-hover-btn--green::before {
  background: linear-gradient(135deg, #00b894 0%, #00a885 100%);
}

.demo-hover-btn--orange {
  border-color: #fdcb6e;
  color: #e17055;
}

.demo-hover-btn--orange::before {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}

.demo-hover-btn--pink {
  border-color: #fd79a8;
  color: #fd79a8;
}

.demo-hover-btn--pink::before {
  background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
}

応用例

このテクニックは、ボタン以外にも様々な要素に応用できます。

**リンクのホバーエフェクト**
テキストリンクの下線をこの方法でアニメーションさせることもできます。

**カードのホバー**
カード全体にこのエフェクトを適用して、ホバー時に背景色が変わる演出も可能です。

**ナビゲーションメニュー**
メニュー項目のホバー時に背景がスライドするエフェクトにも使えます。

まとめ

疑似要素とtransform: scaleX()、そしてtransform-originの切り替えを組み合わせることで、印象的なボタンホバーエフェクトを作成できます。

JavaScriptを使わずにCSSだけで実現できるため、パフォーマンスにも優れています。色やアニメーション速度をカスタマイズして、ぜひプロジェクトに取り入れてみてください。