ボタンホバー時にふわっと色を変える【CSS】

2025/06/262025/06/27

ボタンにマウスを乗せたとき、ふわっと色が変わる演出は非常に基本的ながら効果的です。
CSSのtransitionプロパティを使えば、カラーチェンジやサイズ変更などのアニメーションをスムーズに表現できます。ユーザーに反応があることを示すため、ボタンやリンクには積極的に使いたいテクニックです。

HTML


<a href="#" class="hover-btn">ボタン</a>

基本CSS


.hover-btn {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hover-btn:hover {
  background-color: #2980b9;
}

.hover-btn {

background-color: #3498db;

color: #fff;

padding: 10px 20px;

border: none;

cursor: pointer;

transition: background-color 0.3s ease;

}

.hover-btn:hover {

background-color: #2980b9;

}

応用：色だけでなく影やサイズも変化させる

ボタンのホバー時に影を追加したり、少し拡大することでよりリッチな印象を与えられます。


.hover-btn {
  transition: all 0.3s ease;
}

.hover-btn:hover {
  background-color: #2980b9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}