CSSでボタンをふんわりアニメーションさせる（transition）

2025/06/25

ボタンに自然な動きをつけるアニメーション

transitionプロパティを使えば、ホバー時などのスタイル変更にアニメーション効果をつけられます。ちょっとした動きが加わるだけで印象が良くなります。

HTML


<a href="#" class="button">ボタンサンプル</a>

<a href="#" class="button">ボタンサンプル</a>


.button {
  background: #3498db;
  color: #fff;
  transition: background 0.3s ease;
}

.button:hover {
  background: #2980b9;
}

.button {

background: #3498db;

color: #fff;

transition: background 0.3s ease;

}

.button:hover {

background: #2980b9;

}


.button {
  transition: all 0.3s ease;
}

.button {

transition: all 0.3s ease;

}

easeのほか、linearやease-in-outなどの指定が可能です。
アニメーションしたいプロパティのみを明示するのが基本となります。

よかったらシェアしてね！