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

角丸バリエーションボタン(直角/やや丸/ピル型)

border-radiusの違いだけを比較できるボタン見本。サイト全体のトーンに合わせた角丸量の検討に便利。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-03-wrap">
          <button class="d04-05-03-btn d04-05-03-sharp">直角</button>
          <button class="d04-05-03-btn d04-05-03-soft">やや丸</button>
          <button class="d04-05-03-btn d04-05-03-pill">ピル型</button>
        </div>

CSS

.d04-05-03-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-03-btn{ background:#7c3aed; color:#fff; border:none; padding:11px 24px; font-size:14px; font-weight:600; font-family:inherit; cursor:default; }
        .d04-05-03-sharp{ border-radius:0; }
        .d04-05-03-soft{ border-radius:8px; }
        .d04-05-03-pill{ border-radius:999px; }

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