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

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

目次

1. ボタンのHTMLコード

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

3. 色がフェードインする

4. 枠線の色が変わる

5. 影の色が変わる

6. ボタンが膨らむ

7. まとめ

ボタンの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 ;
}

続きはこちら
https://eguweb.jp/css/72388/