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

縦型トグルスイッチ(静止)

ノブが上下に動く縦向きのスイッチ形状です。狭い縦スペースの設定パネルや行内コントロールに使える見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-08-11-row">
          <span class="d04-08-11-sw d04-08-11-on"><span class="d04-08-11-knob"></span></span>
          <span class="d04-08-11-sw d04-08-11-off"><span class="d04-08-11-knob"></span></span>
        </div>

CSS

.d04-08-11-row{display:flex;gap:20px;align-items:center}
        .d04-08-11-sw{position:relative;width:26px;height:52px;border-radius:13px;display:inline-block}
        .d04-08-11-on{background:#7c3aed}
        .d04-08-11-off{background:#d1d5db}
        .d04-08-11-knob{position:absolute;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
        .d04-08-11-on .d04-08-11-knob{top:3px}
        .d04-08-11-off .d04-08-11-knob{bottom:3px}

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