コピペで使えるおしゃれなCSSバッジ・タグのサンプル集。NEW・SALEなどのラベルから通知バッジ・ステータス表示・リボンまで12種類。シャッフルで配色のバリエーションを試せて、表示中のプレビューとコードは常に一致します。クラス名は .bnto-badge-solid 形式です。
該当するパーツが見つかりませんでした。
.bnto-badge-solid { display: inline-flex; align-items: center; background: hsl(5 100% 65%); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 30px; }
<span class="bnto-badge-solid">NEW</span>
もっとも汎用的な塗りバッジ。見出しの横に置くときは vertical-align: middle; か、親を flex にして揃えるときれいです。「NEW」は赤系、「PR」はグレー系など、意味ごとに色を固定すると読み手が迷いません。
.bnto-badge-soft { display: inline-flex; align-items: center; background: hsl(202 73% 90%); color: hsl(202 73% 34%); font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 30px; }
<span class="bnto-badge-soft">INFO</span>
「同じ色相の淡い背景 + 濃い文字」の組み合わせが上品に見えるコツ。背景の明度は90%前後、文字は35%前後を目安にすると読みやすさを保てます。数が多く並ぶ管理画面のラベルに向いています。
.bnto-badge-outline { display: inline-flex; align-items: center; background: transparent; color: hsl(130 35% 45%); border: 2px solid hsl(130 35% 45%); font-weight: 800; font-size: 13px; padding: 5px 15px; border-radius: 30px; }
<span class="bnto-badge-outline">準備中</span>
塗りバッジより主張が弱いので、カテゴリ分類など「情報として添えるタグ」に最適。強調したい「NEW」「SALE」は塗り、分類は枠線、と使い分けるとページにメリハリが出ます。
.bnto-badge-ghost { display: inline-flex; align-items: center; background: hsl(202 73% 56% / 0.16); color: hsl(202 73% 56%); font-weight: 800; font-size: 13px; padding: 6px 15px; border-radius: 8px; }
<span class="bnto-badge-ghost">下書き</span>
背景に文字色の半透明（/ 0.16）を敷くだけなので、色を1つ決めれば全体が揃う手軽さが魅力。透明度を上げるほど存在感が増します。「下書き」「保留」など控えめなステータスにどうぞ。
.bnto-badge-gradient { display: inline-flex; align-items: center; background: linear-gradient(120deg, hsl(41 100% 50%), hsl(5 100% 65%)); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 30px; }
<span class="bnto-badge-gradient">PRO</span>
「PRO」「PREMIUM」などの特別感を出したいラベルに。グラデの2色は色相を30〜40度ずらした隣り合う色にすると、派手すぎず馴染みます。角度は 120deg の部分で調整できます。
.bnto-badge-square { display: inline-flex; align-items: center; background: hsl(258 47% 56%); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 5px 12px; border-radius: 7px; }
<span class="bnto-badge-square">SALE</span>
ピル型より少しかっちりした印象になるので、ECの「SALE」「送料無料」や記事の「PR」表記に好相性。英字ラベルは letter-spacing を少し広げると読みやすくなります。
.bnto-badge-dot { display: inline-flex; align-items: center; gap: 7px; background: hsl(130 45% 90%); color: hsl(130 45% 34%); font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 30px; } .bnto-badge-dot i { width: 8px; height: 8px; border-radius: 50%; background: hsl(130 45% 48%); }
<span class="bnto-badge-dot"><i></i>稼働中</span>
頭の丸は空の <i> タグです。「稼働中＝緑／停止＝赤／準備中＝黄」のように色で状態を表すと一目で伝わります。丸と文字の間隔は gap で調整してください。
.bnto-badge-pulse { display: inline-flex; align-items: center; gap: 7px; background: hsl(12 71% 92%); color: hsl(12 71% 40%); font-weight: 800; font-size: 13px; padding: 6px 16px; border-radius: 30px; } .bnto-badge-pulse i { width: 8px; height: 8px; border-radius: 50%; background: hsl(12 71% 53%); animation: bnto-pulse 1.6s ease-out infinite; } @keyframes bnto-pulse { 0% { box-shadow: 0 0 0 0 hsl(12 71% 53% / 0.55); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
<span class="bnto-badge-pulse"><i></i>LIVE</span>
広がる波紋は box-shadow をアニメーションさせる定番テクニック。波の大きさは 0 0 0 7px、速さは 1.6s で調整します。「LIVE」「配信中」「募集中」など今まさに動いている状態の演出にどうぞ。
.bnto-badge-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: hsl(5 100% 65%); color: #fff; font-weight: 800; font-size: 14px; border-radius: 50%; }
<span class="bnto-badge-number">3</span>
カートの中身やタブの件数表示に。width と height を同じ値にして真円を保ちます。「99+」のように桁が増える可能性があるなら width を min-width に替え、左右に padding を足すと崩れません。
.bnto-badge-notify { position: relative; display: inline-flex; } .bnto-badge-notify i { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: hsl(5 100% 62%); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; border-radius: 999px; border: 2px solid #fff; /* 背景色に合わせる */ }
<!-- 中身はベル等の好きなアイコンに差し替え --> <span class="bnto-badge-notify"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg> <i>3</i> </span>
親を position: relative にして数字を右上に絶対配置する構造です。縁取りの border: 2px solid #fff はページの背景色に合わせると「くり抜き」に見えます。件数が不要なら <i></i> を空にして幅8px程度の小さな丸ドットにしてもOK。
.bnto-badge-tag { position: relative; display: inline-flex; align-items: center; background: hsl(24 92% 50%); color: #fff; font-weight: 800; font-size: 13px; padding: 7px 16px 7px 24px; border-radius: 0 8px 8px 0; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); } /* 紐を通す丸穴（背景色に合わせて変更） */ .bnto-badge-tag::before { content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; }
<span class="bnto-badge-tag">30% OFF</span>
左のとがりは clip-path、丸穴は ::before の小さな円です。穴の色（#fff）は置く場所の背景色に合わせて変えると本当に穴が空いて見えます。値引きや商品ラベルにぴったり。
/* 親カードに position:relative と overflow:hidden が必要 */ .bnto-badge-ribbon { position: absolute; top: 10px; right: -38px; transform: rotate(45deg); background: hsl(345 80% 55%); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 4px 42px; }
<div style="position:relative;overflow:hidden;"> カードの中身… <span class="bnto-badge-ribbon">SALE</span> </div>
親カードの overflow: hidden でリボンの両端を切り落とすのがポイント。文字数が変わったら top と right、左右の padding を微調整して角にきれいに載せてください。商品カードの「SALE」「人気」表示の定番です。
バッジ・タグは、「NEW」「SALE」などの強調ラベル、記事のカテゴリを示す分類タグ、稼働状況や未読件数を示すステータス・通知表示まで、小さいながら情報の優先度を伝える重要なUIパーツです。このページでは、コピペで使えるCSSバッジ・タグデザインを12種類掲載しています。すべて画像を使わないピュアCSSなので表示が速く、色や文言の変更も自由です。
使い方は、CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけ。クラス名はすべて .bnto-badge-〇〇 という独自プレフィックス付きのため、既存サイトのCSSと衝突しにくくなっています。
視線を集めたい「NEW」「SALE」にはソリッドやグラデーションなどの塗りバッジを、カテゴリ分類のように数が並ぶタグにはアウトラインやソフト（淡色）を使うのが基本。強調は塗り・分類は控えめ、と役割を分けるとページ全体がうるさくなりません。
バッジの色には意味を持たせましょう。赤=重要・エラー、緑=正常・稼働中、黄=注意、青=情報という慣習に沿って統一すれば、ユーザーは文字を読む前に状態を判断できます。同じ意味のバッジがページによって違う色にならないよう、CSS変数で色を一元管理するのがおすすめです。
見出しやリスト項目にバッジを添えるときは、親要素を display: flex; align-items: center; にして揃えるのが確実です。バッジ内の文字は本文より2〜3px小さめ・太字にすると、小さくても埋もれません。
bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。display: inline-flex; と align-items: center; が効いているか確認してください。周囲の行の高さに影響される場合は line-height: 1; を追加すると安定します。background と color の値を書き換えるだけです。赤=重要・緑=正常・黄=注意のように意味を決めて色を統一すると、ユーザーが状態をひと目で判断できます。各カードの「シャッフル」ボタンで配色のバリエーションも試せます。バッジ・タグと組み合わせて使いやすいパーツはこちら。