ボタンのCSSコピペパーツ 26選

CRG-01-001

沈み込みボタンPress Down

.cg-btn-press {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #E8590C;
  border: none;
  border-radius: 8px;
  box-shadow: 0 5px 0 #B84508;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.cg-btn-press:hover { transform: translateY(2px); box-shadow: 0 3px 0 #B84508; }
.cg-btn-press:active { transform: translateY(5px); box-shadow: 0 0 0 #B84508; }

<button class="cg-btn-press">送信する</button>

GROSS WT. 460 B ORIGINAL

CRG-01-002

スライド塗りボタンSlide Fill

.cg-btn-slide {
  padding: 13px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #1B1A17;
  background: linear-gradient(#1B1A17, #1B1A17) no-repeat left / 0% 100%;
  border: 2px solid #1B1A17;
  border-radius: 6px;
  cursor: pointer;
  transition: background-size .35s ease, color .35s ease;
}
.cg-btn-slide:hover { background-size: 100% 100%; color: #fff; }

<button class="cg-btn-slide">詳しく見る</button>

GROSS WT. 416 B ORIGINAL

CRG-01-003

次へ進む

矢印が進むボタンArrow Nudge

.cg-btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border-radius: 30px;
  text-decoration: none;
}
.cg-btn-arrow span { transition: transform .25s ease; }
.cg-btn-arrow:hover span { transform: translateX(6px); }

<a href="#" class="cg-btn-arrow">次へ進む<span aria-hidden="true">→</span></a>

GROSS WT. 421 B ORIGINAL

CRG-01-004

呼吸する光ボタンGlow Pulse

.cg-btn-glow {
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #E8590C;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  animation: cg-glow 2.2s ease-in-out infinite;
}
@keyframes cg-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .45); }
  50% { box-shadow: 0 0 0 12px rgba(232, 89, 12, 0); }
}

<button class="cg-btn-glow">今すぐ予約</button>

GROSS WT. 410 B ORIGINAL

CRG-01-005

二重枠ボタンDouble Border

.cg-btn-double {
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #1B1A17;
  background: #fff;
  border: 2px solid #1B1A17;
  outline: 2px solid #1B1A17;
  outline-offset: 3px;
  cursor: pointer;
  transition: outline-offset .2s ease, background .2s;
}
.cg-btn-double:hover { outline-offset: 0px; background: #F2B707; }

<button class="cg-btn-double">お問い合わせ</button>

GROSS WT. 397 B ORIGINAL

CRG-01-006

光が走るボタンShine Sweep

.cg-btn-shine {
  position: relative;
  overflow: hidden;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.cg-btn-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.cg-btn-shine:hover::before { left: 120%; }

<button class="cg-btn-shine">無料ダウンロード</button>

GROSS WT. 582 B ORIGINAL

CRG-01-007

切り欠きボタンCut Corner

.cg-btn-cut {
  padding: 14px 40px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: #3A5A78;
  border: none;
  cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background .2s;
}
.cg-btn-cut:hover { background: #E8590C; }

<button class="cg-btn-cut">ENTER</button>

GROSS WT. 389 B ORIGINAL

CRG-01-008

アイコンが跳ねるボタンIcon Pop

.cg-btn-pop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  color: #1B1A17;
  background: #F2B707;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.cg-btn-pop svg { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cg-btn-pop:hover svg { transform: rotate(180deg) scale(1.15); }

<button class="cg-btn-pop"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9"/><path d="m15 2 6 1-1 6"/></svg>更新する</button>

GROSS WT. 653 B ORIGINAL

CRG-01-009

下線が伸びるテキストボタンUnderline Grow

.cg-btn-under {
  display: inline-block;
  padding: 4px 2px;
  font-size: 16px;
  font-weight: 700;
  color: #1B1A17;
  text-decoration: none;
  background: linear-gradient(#E8590C, #E8590C) no-repeat left bottom / 0% 3px;
  transition: background-size .3s ease;
}
.cg-btn-under:hover { background-size: 100% 3px; }

<a href="#" class="cg-btn-under">続きを読む</a>

GROSS WT. 367 B ORIGINAL

CRG-01-010

奥行き反転ボタン3D Flip

.cg-btn-flip {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 400px;
  font-size: 15px;
  font-weight: 700;
}
.cg-btn-flip-in {
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.cg-btn-flip i {
  display: block;
  font-style: normal;
  padding: 14px 38px;
  letter-spacing: .12em;
  color: #fff;
  background: #1B1A17;
  border-radius: 6px;
  backface-visibility: hidden;
}
.cg-btn-flip i + i {
  position: absolute;
  inset: 0;
  background: #E8590C;
  transform: rotateX(180deg);
}
.cg-btn-flip:hover .cg-btn-flip-in { transform: rotateX(180deg); }

<button class="cg-btn-flip"><span class="cg-btn-flip-in"><i>MENU</i><i>OPEN</i></span></button>

GROSS WT. 764 B ORIGINAL

CRG-01-011

資料をダウンロード

スプリット(区画)ボタンSplit Section

.cg-btn-sp {
  display: inline-flex;
  align-items: stretch;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
.cg-btn-sp span { padding: 14px 24px; }
.cg-btn-sp i {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-style: normal;
  background: #E8590C;
  transition: padding .2s ease;
}
.cg-btn-sp:hover i { padding: 0 22px; }

<a href="#" class="cg-btn-sp"><span>資料をダウンロード</span><i aria-hidden="true">↓</i></a>

GROSS WT. 543 B ORIGINAL

CRG-01-012

ローディング状態ボタンLoading State

.cg-btn-load {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #8B857A;
  border: none;
  border-radius: 10px;
  cursor: wait;
}
.cg-btn-load i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: cg-btn-load-spin .7s linear infinite;
}
@keyframes cg-btn-load-spin { to { transform: rotate(360deg); } }

<button class="cg-btn-load" disabled><i aria-hidden="true"></i>送信中...</button>

GROSS WT. 577 B ORIGINAL

CRG-01-013

color-mix自動ホバー色Color-Mix Hover

.cg-btn-mix {
  --base: #E8590C;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--base);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
/* ホバー色・アクティブ色を --base から自動生成 */
.cg-btn-mix:hover { background: color-mix(in oklch, var(--base) 82%, black); }
.cg-btn-mix:active { background: color-mix(in oklch, var(--base) 68%, black); }

<button class="cg-btn-mix">ベース色から自動生成</button>

GROSS WT. 519 B ORIGINAL

CRG-01-014

回転コニック枠ボタンRotating Conic Border

@property --cg-conic-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cg-btn-conic {
  padding: 15px 36px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1B1A17;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--cg-conic-angle), #E8590C, #F2B707, #C2426B, #E8590C) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  animation: cg-btn-conic-spin 3s linear infinite;
}
@keyframes cg-btn-conic-spin {
  to { --cg-conic-angle: 360deg; }
}

<button class="cg-btn-conic">PREMIUM</button>

GROSS WT. 608 B ORIGINAL

CRG-01-015

ぷるんと弾むボタンJelly Bounce

.cg-btn-jelly {
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #E8557E;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.cg-btn-jelly:hover {
  animation: cg-btn-jelly-boing .55s ease;
}
@keyframes cg-btn-jelly-boing {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.16, .84); }
  50% { transform: scale(.9, 1.1); }
  75% { transform: scale(1.06, .94); }
  100% { transform: scale(1, 1); }
}

<button class="cg-btn-jelly">ぷるん</button>

GROSS WT. 505 B ORIGINAL

CRG-01-016

無料ではじめる

流れるグラデCTAFlowing Gradient CTA

.cg-btn-gflow {
  display: inline-block;
  padding: 15px 36px;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(110deg, #E8590C, #C2426B, #F2B707, #E8590C);
  background-size: 280% auto;
  animation: cg-btn-gflow-move 4s linear infinite;
  box-shadow: 0 6px 18px rgba(232, 89, 12, .35);
}
@keyframes cg-btn-gflow-move {
  to { background-position: 280% center; }
}

<a href="#" class="cg-btn-gflow">無料ではじめる</a>

GROSS WT. 505 B ORIGINAL

CRG-01-017

リング波紋CTAPulse Ring

.cg-btn-ring {
  position: relative;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #2FA45E;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.cg-btn-ring::before,
.cg-btn-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 2px solid #2FA45E;
  animation: cg-btn-ring-out 2s ease-out infinite;
}
.cg-btn-ring::after { animation-delay: .7s; }
@keyframes cg-btn-ring-out {
  to { transform: scale(1.35); opacity: 0; }
}

<button class="cg-btn-ring">予約する</button>

GROSS WT. 564 B ORIGINAL

CRG-01-018

定期的に震えるボタンAttention Shake

.cg-btn-shake {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  background: #C0392B;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  animation: cg-btn-shake-move 3.2s ease-in-out infinite;
}
@keyframes cg-btn-shake-move {
  0%, 86%, 100% { transform: translateX(0) rotate(0); }
  88% { transform: translateX(-3px) rotate(-1.5deg); }
  90% { transform: translateX(3px) rotate(1.5deg); }
  92% { transform: translateX(-3px) rotate(-1deg); }
  94% { transform: translateX(2px) rotate(1deg); }
  96% { transform: translateX(0) rotate(0); }
}

<button class="cg-btn-shake">残り3席</button>

GROSS WT. 627 B ORIGINAL

CRG-01-019

続きを見る

矢印が流れ込むボタンArrow Stream

.cg-btn-stream {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  color: #1B1A17;
  background: #F2B707;
  text-decoration: none;
  border-radius: 30px;
}
.cg-btn-stream i {
  position: relative;
  width: 20px;
  height: 1.2em;
  overflow: hidden;
  font-style: normal;
}
.cg-btn-stream b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: cg-btn-stream-run 1.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
.cg-btn-stream b:last-child { transform: translateX(-160%); animation-delay: 0s; }
@keyframes cg-btn-stream-run {
  to { transform: translateX(160%); }
}

<a href="#" class="cg-btn-stream">続きを見る<i aria-hidden="true"><b>→</b><b>→</b></i></a>

GROSS WT. 766 B ORIGINAL

CRG-01-020

枠を光が周回するボタンBorder Beam

@property --cg-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cg-btn-beam {
  position: relative;
  padding: 2px;
  border: none;
  border-radius: 12px;
  background: conic-gradient(
    from var(--cg-beam-angle),
    transparent 0 300deg,
    #7FD4FF 330deg,
    transparent 360deg
  ), #33313B;
  cursor: pointer;
  animation: cg-btn-beam-spin 2.4s linear infinite;
}
.cg-btn-beam span {
  display: block;
  padding: 13px 34px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #EAF2FF;
  background: #1B1A22;
  border-radius: 10px;
}
@keyframes cg-btn-beam-spin {
  to { --cg-beam-angle: 360deg; }
}

<button class="cg-btn-beam"><span>GET ACCESS</span></button>

GROSS WT. 717 B ORIGINAL

CRG-01-021

鼓動するCTAHeartbeat CTA

.cg-btn-beat {
  padding: 15px 36px;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  background: #C2426B;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  animation: cg-btn-beat-thump 1.8s ease-in-out infinite;
}
/* 心拍のように「ドッ・ドッ」と2回続けて脈打つ */
@keyframes cg-btn-beat-thump {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.07); }
  20% { transform: scale(1); }
  30% { transform: scale(1.05); }
}

<button class="cg-btn-beat">今すぐ応募する</button>

GROSS WT. 533 B ORIGINAL

CRG-01-022

リキッドモーフボタンLiquid Morph

.cg-btn-liquid {
  padding: 15px 38px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border: none;
  cursor: pointer;
  animation: cg-btn-liquid-morph 5s ease-in-out infinite;
  transition: background .3s ease, animation-duration .3s ease;
}
.cg-btn-liquid:hover { animation-duration: 1.4s; background: #2A4560; }
@keyframes cg-btn-liquid-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 45% 41% 59% 55%; }
  25% { border-radius: 68% 32% 40% 60% / 55% 65% 35% 45%; }
  50% { border-radius: 35% 65% 58% 42% / 62% 38% 62% 38%; }
  75% { border-radius: 55% 45% 35% 65% / 40% 60% 40% 60%; }
}

<button class="cg-btn-liquid">お試しする</button>

GROSS WT. 680 B ORIGINAL

CRG-01-023

ロケット発射ボタンRocket Launch

.cg-btn-rocket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 34px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(135deg, #2B2F55, #14162C);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-btn-rocket .rocket {
  position: relative;
  width: 16px;
  height: 22px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(#fff, #C7D0E0);
  transition: transform .5s cubic-bezier(.5, -0.3, .7, 1);
}
.cg-btn-rocket .rocket::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: -4px;
  right: -4px;
  height: 6px;
  background: #E8557E;
  clip-path: polygon(0 100%, 30% 0, 70% 0, 100% 100%);
}
.cg-btn-rocket .flame {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 8px;
  height: 0;
  margin-left: -4px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(#FFE14D, #FF8A4D);
  transform-origin: top;
  transition: height .3s;
}
.cg-btn-rocket b { position: relative; z-index: 1; }
/* ホバーでロケットが上へ発射、噴射炎が伸びる */
.cg-btn-rocket:hover .rocket { transform: translateY(-46px); }
.cg-btn-rocket:hover .flame { height: 16px; animation: cg-btn-rocket-flame .15s linear infinite; }
@keyframes cg-btn-rocket-flame {
  50% { height: 22px; opacity: .8; }
}

<button class="cg-btn-rocket" type="button"><span class="rocket" aria-hidden="true"><i class="flame"></i></span><b>LAUNCH</b></button>

GROSS WT. 1513 B ORIGINAL

CRG-01-024

折り紙バッグ購入ボタンOrigami Bag

.cg-btn-bag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #2A2622;
  background: #F3EDE3;
  border: 2px solid #2A2622;
  border-radius: 12px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.cg-btn-bag .bag {
  position: relative;
  width: 20px;
  height: 18px;
  background: #C89B6C;
  border-radius: 2px 2px 4px 4px;
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
/* 紙袋の持ち手 */
.cg-btn-bag .handle {
  position: absolute;
  top: -6px;
  left: 4px;
  right: 4px;
  height: 8px;
  border: 2px solid #8A6A44;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  transition: transform .4s;
}
/* ホバーで袋が開いて持ち手が立ち上がる=梱包演出 */
.cg-btn-bag:hover {
  background: #2A2622;
  color: #F3EDE3;
}
.cg-btn-bag:hover .bag { transform: scaleY(1.15) rotate(-4deg); }
.cg-btn-bag:hover .handle { transform: translateY(-3px) scaleX(1.1); }

<button class="cg-btn-bag" type="button"><span class="bag" aria-hidden="true"><i class="handle"></i></span><b>ADD TO BAG</b></button>

GROSS WT. 1172 B ORIGINAL

CRG-01-025

キーキャップ打鍵ボタンKeycap Press

.cg-btn-keycap {
  position: relative;
  display: inline-block;
  padding: 0 0 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* 受け皿(キーが沈み込む土台)。打鍵で一緒に潰れて影が締まる */
.cg-btn-keycap::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 18px;
  border-radius: 10px;
  background: #B7B0A0;
  transform-origin: 50% 100%;
  box-shadow: 0 10px 16px rgba(27, 26, 23, .26);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s cubic-bezier(.34, 1.56, .64, 1);
}
/* キートップ本体。指を離すと少し行き過ぎてから戻る(ばね) */
.cg-btn-keycap .cap {
  position: relative;
  display: block;
  padding: 15px 34px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1B1A17;
  background: linear-gradient(#FFFDF6, #E7E1D3);
  border: 1px solid #CFC8B8;
  border-radius: 11px;
  overflow: hidden;
  transform: translateY(0);
  box-shadow: 0 8px 0 #A9A291, inset 0 2px 0 #fff;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s cubic-bezier(.34, 1.56, .64, 1);
}
/* キートップを走る光沢。ホバーで一度だけ抜けていく */
.cg-btn-keycap .cap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22, 1, .36, 1);
}
.cg-btn-keycap:hover .cap,
.cg-btn-keycap:focus-visible .cap {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 #A9A291, inset 0 2px 0 #fff;
}
.cg-btn-keycap:hover .cap::after,
.cg-btn-keycap:focus-visible .cap::after { left: 120%; }
.cg-btn-keycap:active .cap {
  transform: translateY(8px);
  box-shadow: 0 0 0 #A9A291, inset 0 3px 6px rgba(27, 26, 23, .22);
}
.cg-btn-keycap:active::before {
  transform: scaleY(.7);
  box-shadow: 0 4px 8px rgba(27, 26, 23, .34);
}
.cg-btn-keycap:focus-visible {
  outline: 3px solid #3A5A78;
  outline-offset: 4px;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .cg-btn-keycap::before,
  .cg-btn-keycap .cap { transition: none; }
  .cg-btn-keycap .cap::after { display: none; }
}

<button type="button" class="cg-btn-keycap" aria-label="決定"><span class="cap">ENTER</span></button>

GROSS WT. 2497 B ORIGINAL

CRG-01-026

長押しで確定するボタンHold to Confirm

.cg-btn-hold {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #1B1A17;
  color: #F5F2EA;
  font: 700 14px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: center;
  transition: box-shadow .3s ease;
}
.cg-btn-hold:focus-visible {
  outline: 3px solid #F2B707;
  outline-offset: 3px;
}
/* 押している間だけ再生。離すとアニメが外れて即リセット=誤操作防止の要 */
.cg-btn-hold:active { animation: cg-btn-hold-body 1.7s cubic-bezier(.34, 1.56, .64, 1) forwards; }
/* 1層目 進捗の帯: 左から満ちる */
.cg-btn-hold-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242, 183, 7, .5), rgba(242, 183, 7, .18));
  transform: scaleX(0);
  transform-origin: left center;
}
.cg-btn-hold:active .cg-btn-hold-fill { animation: cg-btn-hold-fill 1.7s cubic-bezier(.4, 0, .2, 1) forwards; }
.cg-btn-hold-face,
.cg-btn-hold-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.cg-btn-hold-done {
  opacity: 0;
  transform: scale(.7);
}
.cg-btn-hold-tick {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 2層目 3つの目盛り: 段階が見えると「あと少し」が伝わる */
.cg-btn-hold-dots {
  display: inline-flex;
  gap: 5px;
}
.cg-btn-hold-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245, 242, 234, .28);
}
.cg-btn-hold:active .cg-btn-hold-dot { animation: cg-btn-hold-lit .42s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.cg-btn-hold:active .cg-btn-hold-dot:nth-child(2) { animation-delay: .37s; }
.cg-btn-hold:active .cg-btn-hold-dot:nth-child(3) { animation-delay: .74s; }
/* 3層目 結果: 満了した瞬間だけラベルが入れ替わる */
.cg-btn-hold:active .cg-btn-hold-face { animation: cg-btn-hold-out .26s ease 1.12s forwards; }
.cg-btn-hold:active .cg-btn-hold-done { animation: cg-btn-hold-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.12s forwards; }
@keyframes cg-btn-hold-body {
  0% { transform: scale(1); background: #1B1A17; }
  8% { transform: scale(.965); background: #1B1A17; }
  60% { transform: scale(.955); background: #1B1A17; }
  66% { transform: scale(1.06, .9); background: #2F8A59; }
  80% { transform: scale(.99, 1.04); background: #2F8A59; }
  100% { transform: scale(1); background: #2F8A59; }
}
@keyframes cg-btn-hold-fill {
  0% { transform: scaleX(0); opacity: 1; }
  60% { transform: scaleX(1); opacity: 1; }
  66% { transform: scaleX(1); opacity: .6; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes cg-btn-hold-lit {
  0% { transform: scale(1); background: rgba(245, 242, 234, .28); }
  55% { transform: scale(1.6); background: #F2B707; }
  100% { transform: scale(1.15); background: #F2B707; }
}
@keyframes cg-btn-hold-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes cg-btn-hold-pop {
  0% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.12); }
  78% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-btn-hold,
  .cg-btn-hold:active,
  .cg-btn-hold:active .cg-btn-hold-fill,
  .cg-btn-hold:active .cg-btn-hold-dot,
  .cg-btn-hold:active .cg-btn-hold-face,
  .cg-btn-hold:active .cg-btn-hold-done { animation: none; transition: none; }
  .cg-btn-hold:active { background: #2F8A59; }
  .cg-btn-hold:active .cg-btn-hold-fill { transform: scaleX(1); opacity: 0; }
  .cg-btn-hold:active .cg-btn-hold-dot { background: #F2B707; }
  .cg-btn-hold:active .cg-btn-hold-face { opacity: 0; }
  .cg-btn-hold:active .cg-btn-hold-done { opacity: 1; transform: scale(1); }
}

<button class="cg-btn-hold" type="button" aria-label="長押しで削除を確定する"><i class="cg-btn-hold-fill" aria-hidden="true"></i><span class="cg-btn-hold-face" aria-hidden="true"><span class="cg-btn-hold-label">長押しで確定</span><span class="cg-btn-hold-dots"><i class="cg-btn-hold-dot"></i><i class="cg-btn-hold-dot"></i><i class="cg-btn-hold-dot"></i></span></span><span class="cg-btn-hold-done" aria-hidden="true"><svg class="cg-btn-hold-tick" viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7"/></svg>確定しました</span></button>

GROSS WT. 4599 B ORIGINAL

ボタン26点 在庫あり