CSSのグラデーションボタンをホバー(マウスオーバー)でアニメーションさせる方法

CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。
「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。

HTML

CSS

ところがボタンの背景色を単色からグラデーションに変えてみると、「transition」を使っているにもかかわらずアニメーションが効かなくなってしまいます。簡単にできると思ったのに残念な思いをした人も多いのではないでしょうか。

HTML

CSS

でもまだあきらめないでください。ちょっと工夫すればグラデーションを使ったボタンでもアニメーション効果をつける事ができます。

「before・after」擬似要素を使って、「:before」にはホバー前のグラデーションカラーを、「:after」にはホバー後のグラデーションカラーを設定します。
それらを「position」と「z-index」を使ってレイヤーを上下に重ねるように配置します。普通に配置すると「ボタン3」の文字が隠れて見えなくなってしまいますので、「z-index」にマイナスの値を設定するのがコツです。
あとは「opacity」を使って、ホバー時に上に配置されたレイヤーを透明にしてやればアニメーション効果のあるグラデーションボタンの完成です。

HTML

CSS

次のような方法でも似たようなアニメーションを実現する事ができます。「background-size」を元のボタンの高さよりも大きめに設定して、ホバー前とホバー後の4色を使ったグラデーションを作ります。
そしてホバー時に「background-position」を使ってグラデーション背景の位置を上から下に移動させるイメージです。
「background-size」はボタンの高さの最低3倍必要です。ゆとりを持って6倍程度の高さにするとフェードインに近いスムーズなアニメーションになります。この例では50pxの6倍の300pxに設定しています。

HTML

CSS

最終更新日:2018/07/06