パーツ番号 03-13-11 ・ CSSのみ

個別浮遊カード型アイコンボタン列

アイコンひとつひとつを影付きの独立したカードに収めた静止ナビです。カードとカードの間に余白を大きく取り、上品な雰囲気のWordPressサイトのツールバーに使えます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-11-nav">
          <a href="#" onclick="return false" class="d03-13-11-card active" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-11-card" aria-label="検索">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-11-card" aria-label="お気に入り">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0112 5a5.5 5.5 0 019.5 7c-2.5 4.5-9.5 9-9.5 9z"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-11-card" aria-label="設定">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></svg>
          </a>
        </nav>

CSS

.d03-13-11-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
        .d03-13-11-card{
          display:flex;align-items:center;justify-content:center;
          width:46px;height:46px;border-radius:14px;background:#fff;
          color:#64748b;text-decoration:none;
          box-shadow:0 4px 10px rgba(15,23,42,.1);border:1px solid #f1f5f9;
        }
        .d03-13-11-card.active{color:#4338ca;box-shadow:0 6px 14px rgba(67,56,202,.22)}

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