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

成功・完了ボタン(緑系)

承認や確定など肯定的な操作を示す緑系ボタンの見本。濃い塗りと淡い背景の2種を並べている。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-07-wrap">
          <button class="d04-05-07-btn d04-05-07-fill">完了にする</button>
          <button class="d04-05-07-btn d04-05-07-soft">確定済み</button>
        </div>

CSS

.d04-05-07-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-07-btn{ font-size:14px; font-weight:600; padding:11px 22px; border-radius:6px; border:none; font-family:inherit; cursor:default; }
        .d04-05-07-fill{ background:#059669; color:#fff; }
        .d04-05-07-soft{ background:#d1fae5; color:#047857; }

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