GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

【コピペOK】css バッジ デザイン 9選 — NEW・SALE・認証バッジ

· Godrich · 9種 · 6分で読める

フィードバックSCSSCSSのみ自動再生決済・EC通知

サムネイルや名前の横に小さく貼りついて、いまの状態を一目で伝えるラベルがバッジです。新着・セール・認証済み・完売など、写真を使わずコードだけで作れます。ここに載せたcss バッジ デザインはどれもコピペOKで、画像ファイルは一切要りません。

コーナーリボンバッジ01 badge-new-ribbon セールタグバッジ02 badge-sale-percent 認証チェックバッジ03 badge-verified-check ベータグラデーションピルバッジ04 badge-beta-pill ライブパルスドットバッジ05 badge-live-pulse-dot 通知カウントバッジ06 badge-count-notification トレンディングフレイムバッジ07 badge-trending-flame 在庫バーバッジ08 badge-limited-stock 完売ストライプオーバーレイ09 badge-sold-out-overlay

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9つは人気順ではなく、実際のショッピング画面でバッジが登場する順に並べています。最初に目に入る新着(01)と財布を動かすセール(02)から始まり、信頼を伝える認証(03)・まだ調整中だと知らせるベータ(04)へ進みます。続いて今まさに起きていることを示すライブ(05)・通知 一覧 ui のようにたまっていく通知(06)、人気を裏づけるトレンド(07)を経て、在庫が減っていく警告(08)と締切を告げる完売(09)で終わります。同じ小さな札を光が屈折する側へ伸ばせばCSS ホログラムカード効果9選になり、フォームの正誤を伝える側へ沈めればCSS バリデーション アニメーション9選になります。

01コーナーリボンバッジ

何が見えるか

カード角を横切るリボンをrotate(-45deg)で斜めに配置し、その上に重ねた白い光の帯(::after)をbackground-positionだけでスイープさせています。

コーナーリボンバッジ
新しいタブで開く

01 · コーナーリボンバッジ — 計測 累積面積 1.912% · 動いたフレーム 9/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotate(-45deg)::after 빛줄기 스윕overflow: hidden

コードのどこを見るか

止まっていても視線を引き続ける新着ラベルになります。

.ribbon-wrap {
  position: absolute;
  top: $sp-6; left: -$sp-10;
  transform: rotate(-45deg);
}
.ribbon::after {
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .7) 45%, transparent 75%);
  background-size: 220% 100%;
}
.stage.is-demo .ribbon::after {
  animation: shine-sweep $duration $easing infinite;
}
@keyframes shine-sweep {
  0%, 15% { background-position: 140% 0; }
  55%, 100% { background-position: -40% 0; }
}

02セールタグバッジ

画面で起きること

clip-pathで切り抜いた本物の値札の形(穴つき)のバッジが、わずかに揺れながら拡大縮小を繰り返します。

セールタグバッジ
新しいタブで開く

02 · セールタグバッジ — 計測 累積面積 3.387% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-path polygon@keyframes rotate+scalebox-shadow

コードの読み方

糸で吊り下げられた紙タグのように見えます。

.tag {
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
  transform-origin: 8% 50%;
}
.stage.is-demo .tag {
  animation: tag-swing $duration $easing infinite;
}
@keyframes tag-swing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-6deg) scale(1.05); }
  60% { transform: rotate(3deg) scale(1.02); }
  80% { transform: rotate(-1deg) scale(1); }
}

03認証チェックバッジ

どんな動きか

名前の横の認証バッジをPhosphorのSVGアイコン1つで置き、確定の瞬間にtransform: scaleが1 → 1.28 → 0.94 → 1と跳ねてから収まり、確定した感じを出します。

認証チェックバッジ
新しいタブで開く

03 · 認証チェックバッジ — 計測 累積面積 0.231% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

currentColor@keyframes poparia-label

どこを変えるか

.check {
  transform-origin: center;
  color: $color;   /* Phosphor duotone の fill="currentColor" がこの値を受け継ぐ */
}
.stage.is-demo .check {
  animation: pop $duration $easing infinite;
}
@keyframes pop {
  0%, 50% { transform: scale(1); }
  62% { transform: scale(1.28); }
  74% { transform: scale(0.94); }
  86%, 100% { transform: scale(1); }
}

04ベータグラデーションピルバッジ

何が見えるか

紫色のグラデーションレイヤーをピルの背景色に重ね、opacityだけを0から1、また0へと上下させます。

ベータグラデーションピルバッジ
新しいタブで開く

04 · ベータグラデーションピルバッジ — 計測 累積面積 2.951% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

겹친 레이어 opacity 크로스페이드position: absolute; inset: 0border-radius: $r-pill

コードのどこを見るか

2色が溶け合うようにBETAラベルの上で交差します。

.pill { position: relative; overflow: hidden; }
.pill__glow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, $stage-yellow, #a855f7);
  opacity: 0;
}
.stage.is-demo .pill__glow {
  animation: glow-cross $duration $easing infinite;
}
@keyframes glow-cross {
  0%, 10% { opacity: 0; }
  50% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

05ライブパルスドットバッジ

画面で起きること

ドットの背後にある::before円が広がりながらopacityが0まで薄れることを繰り返します。

ライブパルスドットバッジ
新しいタブで開く

05 · ライブパルスドットバッジ — 計測 累積面積 0.147% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

::before scale·opacityaria-label@keyframes ping

コードの読み方

ライブ配信の発信源から信号が広がっていくレーダーのように見えます。

.dot { position: relative; }
.dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: $color;
}
.stage.is-demo .dot::before {
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

06通知カウントバッジ

トースト通知 css とどんな動きが違うか

小さな丸がscale(0)から1.15を経て1に収まるようにバウンドし、ちょうどそのタイミングでベルアイコン自体も短くrotateで揺れます。

通知カウントバッジ
新しいタブで開く

06 · 通知カウントバッジ — 計測 累積面積 0.864% · 動いたフレーム 7/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@keyframes scale bouncetransform-origin@media (prefers-reduced-motion)

どこを変えるか

通知が届いた瞬間を伝えます。

.count {
  transform: scale(0);
}
.stage.is-demo .bell {
  animation: shake $duration $easing infinite;
}
.stage.is-demo .count {
  animation: pop-in $duration $easing infinite;
}
@keyframes pop-in {
  0%, 52% { transform: scale(0); }
  62% { transform: scale(1.15); }
  74%, 100% { transform: scale(1); }
}

07トレンディングフレイムバッジ

何が見えるか

炎形のSVGにfilter: brightnessとhue-rotateをフレームごとに微妙にずらしてかけています。

トレンディングフレイムバッジ
新しいタブで開く

07 · トレンディングフレイムバッジ — 計測 累積面積 3.995% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

filter: hue-rotate·brightness다중 box-shadow 플리커@keyframes

コードのどこを見るか

本物の炎のように規則的な点滅にはなりません。

.stage.is-demo .flame {
  animation: flicker $duration $easing infinite alternate;
}
@keyframes flicker {
  0% { filter: brightness(1) hue-rotate(0deg); transform: scale(1); }
  18% { filter: brightness(1.25) hue-rotate(-6deg); transform: scale(1.05); }
  40% { filter: brightness(.92) hue-rotate(4deg); transform: scale(.97); }
  63% { filter: brightness(1.15) hue-rotate(-3deg); transform: scale(1.03); }
  81% { filter: brightness(.97) hue-rotate(2deg); transform: scale(1); }
  100% { filter: brightness(1.2) hue-rotate(-5deg); transform: scale(1.04); }
}

08在庫バーバッジ

画面で起きること

バッジ内の細いバーがtransform-origin: leftを基準にscaleXを1から0.25まで縮め、同時に背景色が緑→オレンジ→赤へと変わります。

在庫バーバッジ
新しいタブで開く

08 · 在庫バーバッジ — 計測 累積面積 0.817% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleX draintransform-origin: left배경색 다단 보간

コードの読み方

長さと色の両方で在庫の減少を見せます。

.fill {
  transform: scaleX(1);
  transform-origin: left;
}
.stage.is-demo .fill {
  animation: drain $duration $easing infinite;
}
@keyframes drain {
  0%, 10% { transform: scaleX(1); background: $color; }
  50% { transform: scaleX(.6); background: $stage-orange; }
  90%, 100% { transform: scaleX(.25); background: $error; }
}

09完売ストライプオーバーレイ

どんな動きか

カード全体を覆うrepeating-linear-gradientの斜め縞模様が、background-positionの移動でカード全体を流れ続けます。

完売ストライプオーバーレイ
新しいタブで開く

09 · 完売ストライプオーバーレイ — 計測 累積面積 21.144% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

repeating-linear-gradientbackground-position 애니메이션rgba 오버레이

どこを変えるか

中央のSOLD OUTスタンプは呼吸するようにscaleが上下します。

.overlay {
  background: repeating-linear-gradient(-45deg,
    rgba($color, .82) 0 $sp-4,
    rgba($color, .62) $sp-4 #{$sp-4 * 2});
  background-size: #{$sp-4 * 4} #{$sp-4 * 4};
}
.stage.is-demo .overlay {
  animation: stripes-flow $duration $easing infinite;
}
@keyframes stripes-flow {
  0% { background-position: 0 0; }
  100% { background-position: #{$sp-4 * 4} 0; }
}

どこで落とし穴にはまるか — リペイント頼みの動きは録画で消える

04番のベータバッジのグラデーションは、最初background-positionを動かして流していました。目で見れば確かに流れているのに、同じ画面をフレーム単位で比べるとフレーム間の差がほとんど出ません — background-positionのリペイントのタイミングはブラウザ任せで、キャプチャの瞬間とずれると変化が閾値の下に沈んでしまうからです。紫のレイヤーを1枚重ね、そのopacityだけを0から1へ上下させる方式に変えると、同じ見た目がフレームごとにはっきり残りました。背景位置や影のにじみのようにリペイントが要る属性ではなく、opacityやtransformのようにコンポジット段階で回る属性を選べば、目に見えるものと録画に残るものがずれません。色ではなく線の跡で画面を埋める側は手書き風 デザイン LPキットで出会えます。zipを解凍するときに聞かれるパスワードはwpxqsgtkで、表示されているとおりに入力すれば9つのフォルダがそのまま開きます。03番の認証チェックも同じ理由で、線を描き込む方式ではなくアイコン全体をtransform: scaleで弾ませています。

アクセシビリティ

9つすべてがprefers-reduced-motion: reduceのもとでanimation: noneになります。07番の炎の点滅や09番の縞模様オーバーレイのように動き続けるものも、静止した状態で色と形だけで意味が伝わるように止め値を決めてあります。03番のチェックはモーションをオフにすると元の大きさ(scale(1))のまま表示され、認証マーク自体が消えることはありません。この設定の仕組みはMDNのprefers-reduced-motionのページに詳しく載っています。

FAQ

画像ファイルなしで 通知 バッジ css は作れますか？

はい、9つすべて画像ファイルなしで、03・06・07番だけ短いインラインSVGアイコンを添えています。背景・影・clip-pathの形だけでリボンや値札の切り欠き、斜め縞模様まで表現できます。ほかのCSSだけの装飾はサイト内検索で「バッジ」と調べると見つかります。状態や優先度のように実務で使う向きの札はステータス バッジ UI 9選に別に集めています。

バッジの色を自分のブランドカラーに変えられますか？

変えられます。ほとんどのデモはSCSSの先頭にある$color変数ひとつを書き換えるだけで全体の色が変わり、React版も同じことをcolorpropひとつで行います。08番のように状態ごとに色が何段階も変わる項目は@keyframes内の各段階の色もあわせて書き換える必要があります(03番の認証マークはfill="currentColor"なのでcolorの値をそのまま受け継ぎます)。

バッジのアニメーションが画面収録で薄くしか映らないのですが？

動かす属性を変えてください。背景位置や影のにじみはリペイントが要るためブラウザ任せのタイミングで描かれ、キャプチャとずれやすい一方、opacityとtransformはコンポジット段階で回るのでフレームごとにそのまま残ります。このサイトを初めて見た方は、紹介ページでデモをどう作って検証しているかを確認できます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。