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

アウトラインバッジ(ホバーで塗りつぶし)

普段は枠線のみのシンプルなバッジが、ホバーで一気に色が塗りつぶされます。WordPressのタクソノミー表示やスキルタグの控えめな装飾に。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-01-11-row">
          <span class="d09-01-11-badge" style="--c:#2563eb">Design</span>
          <span class="d09-01-11-badge" style="--c:#16a34a">Development</span>
          <span class="d09-01-11-badge" style="--c:#ef4444">Marketing</span>
          <span class="d09-01-11-badge" style="--c:#f59e0b">Support</span>
        </div>

CSS

.d09-01-11-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
        .d09-01-11-badge{--c:#2563eb;display:inline-block;font-size:12px;font-weight:700;color:var(--c);background:transparent;border:1.5px solid var(--c);padding:6px 14px;border-radius:16px;cursor:default;transition:background .25s,color .25s,transform .2s}
        .d09-01-11-badge:hover{background:var(--c);color:#fff;transform:translateY(-2px)}

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