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

グラデーション背景トグルスイッチ

ON状態の背景に鮮やかなグラデーションを敷いたスイッチの見本です。目立たせたいプレミアム設定項目などに使えます。

staticcss

プレビュー

ソースコード

HTML

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

CSS

.d04-08-12-row{display:flex;gap:16px;align-items:center}
        .d04-08-12-sw{position:relative;width:54px;height:28px;border-radius:14px;display:inline-block}
        .d04-08-12-on{background:linear-gradient(90deg,#f97316,#ec4899)}
        .d04-08-12-off{background:#e5e7eb}
        .d04-08-12-knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
        .d04-08-12-on .d04-08-12-knob{right:3px}
        .d04-08-12-off .d04-08-12-knob{left:3px}

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