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

無効化(disabled)状態ボタン表示

通常状態と操作不可状態を並べて比較できる見本。フォーム未入力時のボタン表現をそのまま流用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-05-wrap">
          <button class="d04-05-05-btn d04-05-05-normal">送信する</button>
          <button class="d04-05-05-btn d04-05-05-disabled" disabled>送信不可</button>
        </div>

CSS

.d04-05-05-wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
        .d04-05-05-btn{ font-size:14px; font-weight:600; padding:11px 24px; border-radius:6px; border:none; font-family:inherit; }
        .d04-05-05-normal{ background:#16a34a; color:#fff; cursor:default; }
        .d04-05-05-disabled{ background:#e2e8f0; color:#94a3b8; cursor:not-allowed; }

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