パーツ番号 04-08-02 ・ CSSのみ

四角ノブ型トグルスイッチ

角ばったノブを持つシャープな印象のスイッチです。管理画面のフラットデザインに馴染みます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-08-02-row">
          <span class="d04-08-02-sw d04-08-02-on"><span class="d04-08-02-knob"></span></span>
          <span class="d04-08-02-label">ON</span>
        </div>
        <div class="d04-08-02-row">
          <span class="d04-08-02-sw d04-08-02-off"><span class="d04-08-02-knob"></span></span>
          <span class="d04-08-02-label">OFF</span>
        </div>

CSS

.d04-08-02{flex-direction:column;gap:16px}
        .d04-08-02-row{display:flex;align-items:center;gap:12px}
        .d04-08-02-sw{position:relative;width:54px;height:26px;border-radius:4px;display:block}
        .d04-08-02-on{background:#2563eb}
        .d04-08-02-off{background:#e5e7eb}
        .d04-08-02-knob{position:absolute;top:3px;width:20px;height:20px;border-radius:2px;background:#fff}
        .d04-08-02-on .d04-08-02-knob{right:3px}
        .d04-08-02-off .d04-08-02-knob{left:3px}
        .d04-08-02-label{font-size:13px;color:#374151;font-weight:600}

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