パーツ番号 11-15-05 ・ CSSのみ

丸型トグルボタン(アイコンが太陽/月に変化)

ダーク選択中の状態を大きな丸ボタンとリングで強調した見本です。サイト右下に浮かせるクイック切替ボタンのデザイン検討に使えます。

staticcss

プレビュー

ソースコード

HTML

<span class="d11-15-05-btn">
          <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36A7 7 0 1113.36 3.1 9.13 9.13 0 0012 3z" fill="#e2e8f0"/></svg>
        </span>
        <span class="d11-15-05-sub">タップでライトに切替</span>

CSS

.d11-15-05{flex-direction:column;gap:12px}
        .d11-15-05-btn{width:64px;height:64px;border-radius:50%;background:#1e293b;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #e0e7ff}
        .d11-15-05-sub{font-size:11.5px;color:#94a3b8}

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