【CSS】ボタンがマウスオーバーしたら色が変わっていくようなアニメーションのパターン

ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果のCSSコード例を紹介します。

ボタンのHTMLコード

まずは、各ボタンのHTMLコードです。

<!-- グラデーションで色が変わるボタン -->
<button class="button-gradient">グラデーション</button>

<!-- 色がフェードインするボタン -->
<button class="button-fade-in">フェードイン</button>

<!-- 枠線の色が変わるボタン -->
<button class="button-border-change">枠線変更</button>

<!-- 影の色が変わるボタン -->
<button class="button-shadow-change">影変更</button>

<!-- ボタンが膨らむ -->
<button class="button-puff">膨らむ</button>

グラデーションで色が変わる

グラデーション

.button-gradient {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}

.button-gradient:hover {
  background-image: linear-gradient(45deg, #3498db, #9b59b6);
}

色がフェードインする

フェードイン

.button-fade-in {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s ease;
}

.button-fade-in:hover {
  background-color: #9b59b6;
}

枠線の色が変わる

枠線変更

.button-border-change {
  background-color: #fff;
  color: #3498db;
  padding: 10px 20px;
  border: 2px solid #3498db;
  cursor: pointer;
  outline: none;
  transition: border-color 0.4s ease;
}

.button-border-change:hover {
  border-color: #9b59b6;
}

影の色が変わる

影変更

.button-shadow-change {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 6px #3498db;
  transition: box-shadow 0.4s ease;
}

.button-shadow-change:hover {
  box-shadow: 0 3px 6px #9b59b6;
}

ボタンが膨らむ

膨らむ

.button-puff {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s ease;
}

.button-puff:hover {
  transform: scale(1.1);
}

まとめ

これらのアニメーションは、transitionプロパティを使ってスムーズな変更を実現しています。background-color, border-color, box-shadow, transformなどのプロパティが変更時のアニメーションを制御しています。これらの例を基に、デザインやブランドイメージに合わせてカスタマイズしてみてください。