[css]buttonに枠線を付けて立体的にする方法。

buttonの作り方は色々あります。

今回実装したいのはこんな形のbutton。

通常のbox-shadwoと違い、背景色が白色かつ枠線は青色です。

/実装方法

実装方法

これはこんな感じで実装できます。

See the Pen Untitled by YT (@YT-the-scripter) on CodePen.

box-shadow: 9px 9px 0 -3px white, 9px 9px 0 0 blue;

box-shadowに2つオプションが指定されています。

①前半の9px 9px 0 -3px white

②後半の9px 9px 0 0 blue;

　・1つ目のオプション→水平方向に移動

　・2つ目のオプション→垂直方向に移動

　・3つ目のオプション→ぼかし率

　・4つ目のオプション→要素のサイズ感。

ポイントは、サイズ感のみ値が違うこと。

前半が-3pxのため2つ目よりも小さくなり、立体的な枠線を作っています。

以上です。

buttonの実装はいろんな方法があり迷います。

もしも同じような形のbuttonを実装する際には、この内容を参考にしてみてください。