html5/css3下記サンプルページのような、グラデーションで表現されたボタンのマウスオーバーを、cssのみでフェード処理をする方法をご紹介いたします。グラデーションボタンマウスオーバーのサンプルページボタンなどに使うhoverの変化をフェード処理したい時には、cssのtransitionプロパティを使っていますが、グラデーションに対応していません。マウスオーバー前・マウスオーバー後、両方とも背景にグラデーションがかかっている場合は、マウスオーバー後のグラデーション処理が記述されたボックス(hover後)の上に、通常時のグラデーション処理が記述されたボックス(hover前)を配置し、「hover前」のボックスをtransitionプロパティを使ってopacity(透明度)を1から0へ変化させます。文章だけで説明するのは難しいのですが...、下記のようなイメージです。class="btn"><span>ボタンテキスト</span></a>テキスト部分をspanで囲んで、cssで重なり順を調整しています。z-index:1;}ベンダープレフィックス、幅・高さ、テキスト周りの記述は省略しています。グラデーションの記述についてはいくつか便利なオンラインツールがありますが、今回は下記のジェネレーターを使用いたしました。レスポンシブコーディング案件のご相談お受けいたします。