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

サイズバリエーションボタン(S/M/L)

同一デザインのボタンを3段階のサイズで並べた見本。フォームの重要度や画面幅に応じたサイズ選定の参考になる。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-02-wrap">
          <button class="d04-05-02-btn d04-05-02-s">小</button>
          <button class="d04-05-02-btn d04-05-02-m">中サイズ</button>
          <button class="d04-05-02-btn d04-05-02-l">大きいボタン</button>
        </div>

CSS

.d04-05-02-wrap{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
        .d04-05-02-btn{ background:#0f172a; color:#fff; border:none; border-radius:6px; font-family:inherit; font-weight:600; cursor:default; }
        .d04-05-02-s{ font-size:12px; padding:6px 14px; }
        .d04-05-02-m{ font-size:14px; padding:10px 20px; }
        .d04-05-02-l{ font-size:17px; padding:14px 30px; }

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