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

枠線のみのアウトライントグル

塗りつぶしを持たず輪郭線だけで表現するスイッチです。ミニマルな設定画面のデザインに合います。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d04-08-09{gap:14px}
        .d04-08-09-sw{position:relative;width:48px;height:26px;border-radius:13px;background:transparent;display:inline-block;box-sizing:border-box}
        .d04-08-09-sw i{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;display:block;box-sizing:border-box}
        .d04-08-09-on{border:2px solid #16a34a}
        .d04-08-09-on i{right:2px;border:2px solid #16a34a}
        .d04-08-09-off{border:2px solid #9ca3af}
        .d04-08-09-off i{left:2px;border:2px solid #9ca3af}

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