【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;

}