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

フローティング型クイックテーマ切替ボタン

コンテンツ画面の右下に浮かせた丸型ボタンでテーマ切替を示す見本です。ブログやポートフォリオサイトの常時表示ボタンに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-15-10-frame">
          <span class="d11-15-10-line"></span>
          <span class="d11-15-10-line d11-15-10-short"></span>
          <span class="d11-15-10-fab">
            <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="5" fill="#fff"/><g stroke="#fff" stroke-width="2" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/></g></svg>
          </span>
        </div>

CSS

.d11-15-10-frame{position:relative;width:180px;height:180px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;padding:16px;box-sizing:border-box}
        .d11-15-10-line{display:block;height:6px;border-radius:3px;background:#e2e8f0;margin-bottom:8px;width:70%}
        .d11-15-10-short{width:45%}
        .d11-15-10-fab{position:absolute;bottom:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#f59e0b;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.25)}

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