[CSS]こんなやり方があるとは!ボタンのシャドウに2色の美しいグラデーションを与えるテクニック

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。

2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。

サイトのキャプチャ

Gradient shadow in pure CSS


デモ

まずは、実際の動作から見てましょう。
2色の美しいグラデーションを伴ったシャドウは、ボタンのノーマル時・ホバー時・アクティブ時のそれぞれで異なります。

実装

Step 1: HTML

HTMLはシンプルで、button要素でボタンを実装しています。

Step 2: CSS ボタンのスタイル

まずは、ボタンのスタイルから。
ボタンはパープルとピンクの2色を使ったグラデーションで、CSSの変数を使用して実装します。
※変数は使用しなくても実装できます。それぞれの値に代入してください。

Step 3: CSS ボタンのシャドウ

Step 2で定義した変数を利用して、ボタンのシャドウを2色のグラデーションにして実装します。

通常のシャドウは要素に「box-shadow」を適用しますが、この実装では「::after」を使用してボタンの分身を作成し、分身に2色のグラデーションを適用し、実際のボタンの下に表示し、シャドウにしています。

ホバー時も同様に「::after」を使用して、シャドウを作成します。

アクティブ時もホバー時と同様です。

IEとEdgeの対応

IEとEdgeには、サポートされていない機能があります。

sponsors

top of page

©2018 coliss