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

危険操作用ボタン(赤系警告色)

削除や退会など取り消せない操作向けの警告色ボタン見本。塗りと枠線の2パターンを掲載。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-06-wrap">
          <button class="d04-05-06-btn d04-05-06-fill">削除する</button>
          <button class="d04-05-06-btn d04-05-06-outline">アカウント削除</button>
        </div>

CSS

.d04-05-06-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-06-btn{ font-size:14px; font-weight:600; padding:11px 22px; border-radius:6px; font-family:inherit; cursor:default; }
        .d04-05-06-fill{ background:#dc2626; color:#fff; border:1px solid #dc2626; }
        .d04-05-06-outline{ background:#fff; color:#dc2626; border:1px solid #dc2626; }

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