cssのみでグラデーションのマウスオーバーをフェード処理する

html5/css3
Posted : 2019.1.4
Update : 2019.1.4

下記サンプルページのような、グラデーションで表現されたボタンのマウスオーバーを、cssのみでフェード処理をする方法をご紹介いたします。

グラデーションボタンマウスオーバーのサンプルページ

ボタンなどに使うhoverの変化をフェード処理したい時には、cssのtransitionプロパティを使っていますが、グラデーションに対応していません。

マウスオーバー前・マウスオーバー後、両方とも背景にグラデーションがかかっている場合は、マウスオーバー後のグラデーション処理が記述されたボックス（hover後）の上に、通常時のグラデーション処理が記述されたボックス（hover前）を配置し、「hover前」のボックスをtransitionプロパティを使ってopacity（透明度）を1から0へ変化させます。

文章だけで説明するのは難しいのですが…、下記のようなイメージです。

サンプルソース

html

<a href="#" class="btn"><span>ボタンテキスト</span></a>

テキスト部分をspanで囲んで、cssで重なり順を調整しています。

css

.btn{
    display:block;
    background: linear-gradient(to right, rgb(181, 24, 117) 0%, rgb(218, 99, 102) 50%, rgb(255, 173, 88) 100%);
    position:relative;
    overflow:hidden;
}

.btn::before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background: linear-gradient(to right, rgb(0, 157, 160) 0%, rgb(129, 206, 142) 50%, rgb(255, 254, 124) 100%);
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    transition: opacity .5s;
}

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

.btn span{
    position:relative;
    z-index:1;
}

ベンダープレフィックス、幅・高さ、テキスト周りの記述は省略しています。

グラデーションの記述についてはいくつか便利なオンラインツールがありますが、今回は下記のジェネレーターを使用いたしました。

http://gradientfinder.com/

BACK
NEXT