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

会員ランクステータスバッジ

会員種別をランク別の色とスタイルで示すバッジです。マイページやプロフィールカードの表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-06-wrap">
          <span class="d09-09-06-badge d09-09-06-normal">通常会員</span>
          <span class="d09-09-06-badge d09-09-06-premium">プレミアム</span>
          <span class="d09-09-06-badge d09-09-06-vip">★ VIP</span>
        </div>

CSS

.d09-09-06-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
        .d09-09-06-badge{display:inline-block;padding:6px 16px;border-radius:4px;font-size:12px;font-weight:700;font-family:sans-serif;letter-spacing:.03em}
        .d09-09-06-normal{background:#f3f4f6;color:#4b5563}
        .d09-09-06-premium{background:#ede9fe;color:#6d28d9;border:1px solid #c4b5fd}
        .d09-09-06-vip{background:#78350f;color:#fde68a;background-image:linear-gradient(135deg,#92400e,#78350f)}

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