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

小型ミニトグルスイッチ

コンパクトなサイズに縮小したスイッチです。表の行内など省スペースな箇所への設置に向きます。

staticcss

プレビュー

ソースコード

HTML

<span class="d04-08-08-sw d04-08-08-on"><i></i></span>
        <span class="d04-08-08-sw d04-08-08-off"><i></i></span>

CSS

.d04-08-08{gap:14px}
        .d04-08-08-sw{position:relative;width:30px;height:16px;border-radius:8px;display:inline-block}
        .d04-08-08-sw i{position:absolute;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;display:block}
        .d04-08-08-on{background:#2563eb}
        .d04-08-08-on i{right:2px}
        .d04-08-08-off{background:#cbd5e1}
        .d04-08-08-off i{left:2px}

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