ボタンホバー時に背景色が左から右に現れ、右へ消えるアニメーションの実装

今回は、ボタンにホバーしたときに背景色が左から右へ現れ、ホバーを解除するとそのまま右へ消えるアニメーションを実現するCSSコードを紹介します。このエフェクトは、ユーザーインタラクションに動きを与え、視覚的に魅力的なボタンデザインを作成するのに役立ちます。

ホバーしてね↓

1. HTMLコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.button {
  padding: .5rem 1rem;
  border: 1px solid #333;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  background-color: #ead900;
  transition: transform 0.6s ease;
  transform: scaleX(0);
  transform-origin: right;
  z-index: -1;
}

.button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
</style>
<div class="container">
  <div class="button">delcano!!</div>
</div>

2. 各プロパティの解説

• .container:
  Flexboxを使用してボタンを中央寄せに配置。justify-contentとalign-itemsで、水平方向と垂直方向の位置を指定しています。
• .button:
  ボタン要素に基本的なスタイルを設定しています。
  • padding: ボタン内の余白を設定し、サイズ感を調整。
  • border: 枠線を設定してボタンを視覚的に区別。
  • cursor: pointer;: ホバー時にカーソルが手の形になることで、クリックできることを示します。
  • position: relative;: 疑似要素（背景色）をボタン内で適切に配置するためにrelativeを使用。
  • overflow: hidden;: 背景がボタン外に溢れないようにする設定。
• .button::before:
  ホバー時に表示される背景のスタイルを定義します。
  • content: '';: 空の疑似要素を生成。
  • position: absolute;: ボタン全体に広がるように、背景の位置を絶対位置に設定。
  • inset: 0;: 四方すべてを0にすることで、ボタン全体にピッタリと疑似要素をフィットさせます。
  • background-color: #ead900;: ホバー時に表示される黄色の背景色を指定。
  • transition: transform 0.6s ease;: アニメーションの速さ（0.6秒）と、アニメーションがスムーズに始まり、終わる設定。
  • transform: scaleX(0);: 初期状態では背景を幅0に設定して、表示されないようにします。
  • transform-origin: right;: ホバー解除時に背景が右に消える設定。
• ホバー時のアニメーション:
  .button:hover::beforeを使用して、ホバー時に背景が左から右へ現れるように設定します。ホバー解除時には背景が右に消えるように設定しています。

3. 実装結果

このコードを使用すると、ボタンにマウスホバーすると背景色が左から右に広がり、ホバーを解除すると背景が右に消えていきます。シンプルでありながら、動きがあり、視覚的に目を引くボタンが完成します。

4. 応用方法

このアニメーションは、ボタン以外にもリンクや他のインタラクティブな要素に適用できます。背景色やアニメーションの速さを変更することで、デザインや用途に応じたバリエーションを作ることも可能です。

このようなボタンのホバーエフェクトは、ウェブサイトのインタラクティブ性を高め、ユーザーの注目を集めるのに効果的です。シンプルなCSSのみで実現できるため、パフォーマンスにも優れたアプローチです。