パーツ番号 04-05-09 ・ CSSのみ

影付き立体ボタンセット(静止)

常時ボックスシャドウを付けて浮き上がって見せるボタン見本。フラットデザインに立体感を加えたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-09-wrap">
          <button class="d04-05-09-btn d04-05-09-soft">やわらか影</button>
          <button class="d04-05-09-btn d04-05-09-hard">くっきり影</button>
        </div>

CSS

.d04-05-09-wrap{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
        .d04-05-09-btn{ font-size:14px; font-weight:600; padding:11px 24px; border-radius:8px; border:none; background:#fff; font-family:inherit; cursor:default; }
        .d04-05-09-soft{ box-shadow:0 6px 14px rgba(15,23,42,0.15); color:#1e293b; }
        .d04-05-09-hard{ box-shadow:4px 4px 0 #0f172a; border:2px solid #0f172a; color:#0f172a; }

クラス名 .d04-05-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。