本文へスキップ

CRG-11 — BADGES

バッジ・タグ23点 在庫あり

NEW・ステータス・カウント。小さくても働く札。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-11-001
NEW

NEWピルバッジNew Pill

.cg-bd-new {
  display: inline-block;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  background: #E8590C;
  border-radius: 30px;
}
<span class="cg-bd-new">NEW</span>
GROSS WT. 219 B ORIGINAL
CRG-11-002
稼働中

ステータスドットStatus Dot

.cg-bd-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #256B43;
  background: #E3F4E9;
  border-radius: 30px;
}
.cg-bd-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FA45E;
  animation: cg-bd-status-blink 1.6s ease-in-out infinite;
}
@keyframes cg-bd-status-blink { 50% { opacity: .35; } }
<span class="cg-bd-status">稼働中</span>
GROSS WT. 473 B ORIGINAL
CRG-11-003
3

通知カウントバッジNotification Count

.cg-bd-bell {
  position: relative;
  display: inline-block;
  color: #1B1A17;
}
.cg-bd-bell i {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  color: #fff;
  background: #C0392B;
  border: 2px solid #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
<span class="cg-bd-bell"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
GROSS WT. 748 B ORIGINAL
CRG-11-004
カードの右上に斜めリボンSALE

コーナーリボンCorner Ribbon

.cg-bd-ribbonbox {
  position: relative;
  width: 230px;
  padding: 30px 20px;
  font-size: 13px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  overflow: hidden;
}
.cg-bd-ribbon {
  position: absolute;
  top: 12px;
  right: -34px;
  width: 130px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
  color: #fff;
  background: #C2426B;
  transform: rotate(45deg);
}
<div class="cg-bd-ribbonbox">カードの右上に斜めリボン<span class="cg-bd-ribbon">SALE</span></div>
GROSS WT. 555 B ORIGINAL
CRG-11-005
#CSS #Design

アウトラインタグOutline Tags

.cg-bd-tag {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3A5A78;
  border: 2px solid #3A5A78;
  border-radius: 6px;
  transition: all .18s;
  cursor: pointer;
}
.cg-bd-tag:hover { background: #3A5A78; color: #fff; }
<span class="cg-bd-tag">#CSS</span> <span class="cg-bd-tag">#Design</span>
GROSS WT. 342 B ORIGINAL
CRG-11-006
PRO

グラデピルバッジGradient Pill

.cg-bd-pro {
  display: inline-block;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(120deg, #E8590C, #C2426B);
  border-radius: 30px;
  box-shadow: 0 3px 10px rgba(194, 66, 107, .4);
}
<span class="cg-bd-pro">PRO</span>
GROSS WT. 302 B ORIGINAL
CRG-11-007
合格

押印スタンプバッジRubber Stamp

.cg-bd-stamp {
  display: inline-block;
  padding: 8px 18px;
  font-size: 17px;
  font-weight: 900;
  color: #B8261C;
  border: 3px double #B8261C;
  border-radius: 8px;
  transform: rotate(-6deg);
  opacity: .85;
}
<span class="cg-bd-stamp">合格</span>
GROSS WT. 254 B ORIGINAL
CRG-11-008
公式

認証チェックバッジVerified Check

.cg-bd-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  background: #3A5A78;
  border-radius: 6px;
}
.cg-bd-verified svg {
  background: #fff;
  color: #3A5A78;
  border-radius: 50%;
  padding: 2px;
}
<span class="cg-bd-verified"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>公式</span>
GROSS WT. 542 B ORIGINAL
CRG-11-009
123

ステップ番号バッジStep Number

.cg-bd-steps { display: inline-flex; gap: 10px; }
.cg-bd-steps span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #8B857A;
  background: #EFECE4;
  border-radius: 50%;
}
.cg-bd-steps span.on {
  color: #fff;
  background: #E8590C;
  box-shadow: 0 3px 8px rgba(232, 89, 12, .35);
}
<div class="cg-bd-steps"><span class="on">1</span><span class="on">2</span><span>3</span></div>
GROSS WT. 484 B ORIGINAL
CRG-11-010
HOT

人気急上昇バッジTrending Hot

.cg-bd-hot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, #F2B707, #E8590C);
  border-radius: 30px;
  animation: cg-bd-hot-shake 2.4s ease-in-out infinite;
}
@keyframes cg-bd-hot-shake {
  0%, 86%, 100% { transform: rotate(0); }
  90% { transform: rotate(-4deg); }
  94% { transform: rotate(4deg); }
  98% { transform: rotate(-2deg); }
}
<span class="cg-bd-hot"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>HOT</span>
GROSS WT. 797 B ORIGINAL
CRG-11-011
お知らせ

インデックスラベルIndex Label

.cg-bd-index {
  display: inline-block;
  padding: 7px 22px 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #1B1A17;
  background: #F2B707;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
<span class="cg-bd-index">お知らせ</span>
GROSS WT. 273 B ORIGINAL
CRG-11-012
30%OFF

割引率バッジDiscount Circle

.cg-bd-off {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: #fff;
  background: #C0392B;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  transform: rotate(-8deg);
}
.cg-bd-off b { font-size: 24px; }
.cg-bd-off i { font-size: 13px; font-style: normal; }
<span class="cg-bd-off"><b>30<i>%</i></b>OFF</span>
GROSS WT. 456 B ORIGINAL
CRG-11-013
BETA v0.9

BETAモノバッジBeta Mono

.cg-bd-beta {
  display: inline-block;
  padding: 4px 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #E9E7E0;
  background: #1B1A17;
  border-radius: 4px;
  border: 1px solid #5A5650;
}
<span class="cg-bd-beta">BETA v0.9</span>
GROSS WT. 299 B ORIGINAL
CRG-11-014
NEW!

ぴょんぴょんNEWBouncing NEW

.cg-bd-hop {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  background: #E8590C;
  border-radius: 30px;
  animation: cg-bd-hop-jump 1.3s cubic-bezier(.3, 1.4, .5, 1) infinite;
}
@keyframes cg-bd-hop-jump {
  0%, 45%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-7px) rotate(-4deg); }
}
<span class="cg-bd-hop">NEW!</span>
GROSS WT. 430 B ORIGINAL
CRG-11-015
VERIFIED

発光認証バッジGlowing Verified

.cg-bd-vglow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  background: #3A5A78;
  border-radius: 30px;
  animation: cg-bd-vglow-pulse 2.2s ease-in-out infinite;
}
@keyframes cg-bd-vglow-pulse {
  50% { box-shadow: 0 0 18px rgba(58, 90, 120, .85); }
}
<span class="cg-bd-vglow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>VERIFIED</span>
GROSS WT. 610 B ORIGINAL
CRG-11-016
5

くるっと回る通知数Flipping Count

.cg-bd-flip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #C0392B;
  border-radius: 50%;
  animation: cg-bd-flip-turn 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-bd-flip-turn {
  0%, 60%, 100% { transform: rotateY(0); }
  75% { transform: rotateY(360deg); }
}
<span class="cg-bd-flip">5</span>
GROSS WT. 433 B ORIGINAL
CRG-11-017
PRO

シマーPROバッジShimmer PRO

.cg-bd-shimmer {
  position: relative;
  display: inline-block;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #6B5200;
  background: linear-gradient(120deg, #F2B707, #FFE28A, #F2B707);
  border-radius: 6px;
  overflow: hidden;
}
.cg-bd-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-20deg);
  animation: cg-bd-shimmer-run 2.4s ease-in-out infinite;
}
@keyframes cg-bd-shimmer-run {
  0%, 40% { left: -70%; }
  100% { left: 140%; }
}
<span class="cg-bd-shimmer">PRO</span>
GROSS WT. 689 B ORIGINAL
CRG-11-018
SALE ¥980

ゆれる値札Swinging Price Tag

.cg-bd-swing {
  position: relative;
  display: inline-block;
  padding: 8px 16px 8px 22px;
  font-size: 13px;
  font-weight: 900;
  color: #1B1A17;
  background: #FFE28A;
  border: 2px solid #1B1A17;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  transform-origin: 6px 50%;
  animation: cg-bd-swing-sway 2.4s ease-in-out infinite;
}
.cg-bd-swing i {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #1B1A17;
}
@keyframes cg-bd-swing-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}
<span class="cg-bd-swing"><i aria-hidden="true"></i>SALE ¥980</span>
GROSS WT. 720 B ORIGINAL
CRG-11-019
受付中

レーダーピンRadar Ping

.cg-bd-ping {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #1E5A38;
  background: #E5F4EA;
  border-radius: 30px;
}
.cg-bd-ping i {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2FA45E;
}
.cg-bd-ping i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2FA45E;
  animation: cg-bd-ping-wave 1.6s ease-out infinite;
}
@keyframes cg-bd-ping-wave {
  to { transform: scale(2.8); opacity: 0; }
}
<span class="cg-bd-ping"><i aria-hidden="true"></i>受付中</span>
GROSS WT. 630 B ORIGINAL
CRG-11-020
おすすめ

回る星バッジSpinning Star

.cg-bd-starspin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 900;
  color: #6B5200;
  background: #FFF3D1;
  border: 2px solid #F2B707;
  border-radius: 30px;
}
.cg-bd-starspin svg {
  color: #F2B707;
  animation: cg-bd-starspin-turn 3.4s ease-in-out infinite;
}
@keyframes cg-bd-starspin-turn {
  0%, 55%, 100% { transform: rotate(0) scale(1); }
  70% { transform: rotate(72deg) scale(1.25); }
  85% { transform: rotate(144deg) scale(1); }
}
<span class="cg-bd-starspin"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>おすすめ</span>
GROSS WT. 770 B ORIGINAL
CRG-11-021
FEATURED

ノッチカット矢羽バッジNotch Cutout Tag

.cg-bd-notch {
  display: inline-block;
  padding: 7px 26px 7px 16px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  background: #3A5A78;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
@supports (clip-path: shape(from 0 0, line to 100% 0)) {
  .cg-bd-notch {
    clip-path: shape(from 0 0, line to calc(100% - 14px) 0, line to 100% 50%, line to calc(100% - 14px) 100%, line to 0 100%, close);
  }
}
<span class="cg-bd-notch">FEATURED</span>
GROSS WT. 519 B ORIGINAL
CRG-11-022
プレミアム会員

ガラス階層バッジLayered Glass Badge

.cg-bd-glassdepth {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1B1A17;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 30px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 20px rgba(27, 26, 23, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cg-bd-glassdepth svg { color: #C89B6C; }
.cg-bd-glassdepth:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 14px 26px rgba(27, 26, 23, .24);
}
<span class="cg-bd-glassdepth"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 3 7v10l9 5 9-5V7z"/></svg>プレミアム会員</span>
GROSS WT. 888 B ORIGINAL
CRG-11-023
自動保存

同期ステータスバッジSync State Badge

.cg-bd-sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2B4A63;
  background: #EAF1F7;
  border-radius: 30px;
}
.cg-bd-sync-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.cg-bd-sync-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(58, 90, 120, .25);
  border-top-color: #3A5A78;
  border-radius: 50%;
  animation: cg-bd-sync-spin .85s linear infinite, cg-bd-sync-fade1 3.4s steps(1) infinite;
}
.cg-bd-sync-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #2FA45E;
  border-bottom: 2px solid #2FA45E;
  transform: rotate(-45deg);
  opacity: 0;
  animation: cg-bd-sync-fade2 3.4s steps(1) infinite;
}
@keyframes cg-bd-sync-spin { to { transform: rotate(360deg); } }
@keyframes cg-bd-sync-fade1 { 0%, 82% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes cg-bd-sync-fade2 { 0%, 82% { opacity: 0; } 85%, 100% { opacity: 1; } }
<span class="cg-bd-sync"><i class="cg-bd-sync-icon" aria-hidden="true"></i>自動保存</span>
GROSS WT. 1166 B ORIGINAL