私がよく使っているのが、下のボタンです。 ホバーしてね!単色の背景色が、グラデーションに変わるホバーエフェクト。ホバーした時に「おっ!」となるから好きです。 ただ、このホバーエフェクトは、CSS の指定に注意が必要です。 例えば、下記の指定では上手くいきません。 .example { background-color: #039be5; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .example:hover { background-image: linear-gradient( 45deg, #039be5, #00b7ee, #00d0e8, #00e7d8, #7afac4 ); } この指定をしたのが、下のボタンです。 ダメだよ!transition を指定していますが、背景色が瞬時に切り替わります。ふわっとしたホバーエフェク
![ホバー時に背景色を単色からグラデーションにする CSS の指定方法 - FirstLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6fadc8d5546879dd1f01954aa069992cee3f206/height=288;version=1;width=512/https%3A%2F%2Ffirstlayout.net%2F_astro%2Fcss.BPefjbY4_Z1rYSc3.png)