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

ステータスドット付きボタンセット

ボタン内に小さな状態ドットを添えた見本。稼働状況やオン/オフ状態を伴う操作ボタンの表現に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-05-11-wrap">
          <button class="d04-05-11-btn"><span class="d04-05-11-dot d04-05-11-green"></span>稼働中</button>
          <button class="d04-05-11-btn"><span class="d04-05-11-dot d04-05-11-gray"></span>停止中</button>
        </div>

CSS

.d04-05-11-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
        .d04-05-11-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1f2937; border:1px solid #d1d5db; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; font-family:inherit; cursor:default; }
        .d04-05-11-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
        .d04-05-11-green{ background:#22c55e; }
        .d04-05-11-gray{ background:#9ca3af; }

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