パーツ番号 09-01-09 ・ CSSのみ

カテゴリラベル(色分け)

色分けされた角丸ラベル群。ホバーで少し拡大して浮き上がります。投稿一覧のカテゴリ表示やタクソノミーの視覚整理に使えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-01-09-labels">
          <span class="d09-01-09-label" style="--c:#3b82f6">お知らせ</span>
          <span class="d09-01-09-label" style="--c:#22c55e">ブログ</span>
          <span class="d09-01-09-label" style="--c:#f59e0b">イベント</span>
          <span class="d09-01-09-label" style="--c:#ef4444">重要</span>
          <span class="d09-01-09-label" style="--c:#8b5cf6">コラム</span>
        </div>

CSS

.d09-01-09-labels{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:280px}
        .d09-01-09-label{background:var(--c);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:14px;cursor:default;transition:transform .2s,box-shadow .2s}
        .d09-01-09-label:hover{transform:scale(1.12);box-shadow:0 4px 10px rgba(0,0,0,.18)}

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