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

プライマリ/セカンダリ/ゴーストボタン3種セット

塗り・枠線・透明の基本3系統をまとめて配置。CTAと補助リンクの使い分け見本としてWordPressのボタンブロック設計に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-01-wrap">
          <button class="d04-05-01-btn d04-05-01-primary">プライマリ</button>
          <button class="d04-05-01-btn d04-05-01-secondary">セカンダリ</button>
          <button class="d04-05-01-btn d04-05-01-ghost">ゴースト</button>
        </div>

CSS

.d04-05-01-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-01-btn{ font-size:14px; font-weight:600; padding:10px 22px; border-radius:6px; font-family:inherit; cursor:default; }
        .d04-05-01-primary{ background:#2563eb; color:#fff; border:1px solid #2563eb; }
        .d04-05-01-secondary{ background:#fff; color:#2563eb; border:1px solid #2563eb; }
        .d04-05-01-ghost{ background:transparent; color:#475569; border:1px solid transparent; }

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