CSSで背景グラデーションを徐変(transition)させる方法【小技】

2019/01/21

概要

立体的なボタンをデザインした時、マウスオーバーで色を変えたいことがあります。
しかし、背景にグラデーションを使用している時は transition プロパティで徐々に変化させることができません。

そこで今回はそんなグラデーションの掛かった背景色を徐々に変化せる方法についてまとめます。

背景用に要素を二つ用意すればできる！

結論から言えば「背景用に要素を二つ用意」すると簡単に実現できます。
疑似要素が空いていれば疑似要素を背景用に活用することで HTML に要素を追加する必要もありません。

用意した二つの要素を背景レイヤーにセットして始めに見せておきたい方を上になるように z-index を指定すれば、準備OKです。
あとはマウスオーバー (疑似クラス :hover) で始めに見えていた方の要素を透過します。

このようにして作ったボタンを以下に示します。
グラデーションが徐変していますね。

CSSの設定方法

では CSS の設定の仕方を見ていきましょう。

使用するボタンは以下の <BUTTON> 要素を使用しますが、他の要素でも問題ありません。

親要素のCSSを設定する

ではまずは親要素に CSS を指定していきます。
ここでのポイントは "position: relative;" を指定することです。
※値は static (デフォルト値) 以外なら absolute でも fixed でも構いません。

.sample{ position : relative; /* static以外を指定 */ z-index : 0; /* 疑似要素よりも大きな値を指定 */ overflow : hidden; /* border-radiusなどを指定する場合ははみ出した部分が表示されないようにする */ transition : 0.8s; /* 徐変時間を指定 */ background : transparent; /* 親要素の背景を透過させておく */ /* 以下は必要に応じて設定して下さい */ padding : 16px; color : #7A3E3E; font-weight : 700; line-height : 20px; border : 1px solid #C37272; border-radius : 54px; box-shadow : 4px 4px 10px rgba(0,0,0,0); cursor : pointer; } .sample:hover{ /* 背景以外で変化させるスタイルがあれば指定する */ color : #f95E00; border : 1px solid #D46020; box-shadow : 4px 4px 10px rgba(0,0,0,0.4); }

疑似要素で背景グラデーションを作る

続いて背景用に疑似要素を作っておきます。
疑似要素を既に別の用途で使っている場合は、親要素以下に <DIV> 要素などを作っておいて下さい。

疑似要素を親要素の大きさいっぱいまで広げるには、top/bottom/left/right プロパティの値を全て "0" にします。
こうすることで padding が指定されていても要素いっぱいまで広げることができます。

.sample::before{ content : ' '; /* 通常の要素を追加する場合は不要 */ position : absolute; top : 0; bottom : 0; left : 0; right : 0; z-index : -1; /* 通常状態での背景を変化後の要素よりも前に置く */ background : linear-gradient(0deg,rgba(207,145,145,1),rgba(226,191,191,1)); transition : 0.8s; } .sample::after{ content : ' '; /* 通常の要素を追加する場合は不要 */ position : absolute; top : 0; bottom : 0; left : 0; right : 0; z-index : -2; /* 変化後の背景は一番後ろに置く */ background : linear-gradient(0deg,rgba(255,222,150,1),rgba(255,245,223,1)); }

マウスオーバーで背景用疑似要素を透過させる

始め見えている背景要素をマウスオーバーで透過させてやれば完成です。

.sample:hover::before{ opacity : 0; }

上記を設定した結果

上記設定をすると以下のようにグラデーション背景が変化するボタンを作ることができます。

まとめ

以上、グラデーションにした背景を徐変 (transition) させる方法でした。
今後 CSS のバージョンが上がれば簡単にできるようになるかもしれませんね。それまではこんな方法で実装しましょう。