ホバー演出のCSSコピペパーツ 25選

CRG-10-001

画像ズームホバーImage Zoom

.cg-hv-zoom {
  width: 200px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-zoom-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #C89B6C, #8A6A44);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.cg-hv-zoom:hover .cg-hv-zoom-img { transform: scale(1.12); }

<div class="cg-hv-zoom"><div class="cg-hv-zoom-img"></div></div>

GROSS WT. 401 B ORIGINAL

CRG-10-002

HOVER ME

傾きホバーTilt

.cg-hv-tilt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 40px;
  font-weight: 900;
  letter-spacing: .08em;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.3, 1.4, .6, 1), box-shadow .3s;
}
.cg-hv-tilt:hover {
  transform: rotate(-3deg) scale(1.04);
  box-shadow: 6px 6px 0 #F2B707;
}

<div class="cg-hv-tilt">HOVER ME</div>

GROSS WT. 454 B ORIGINAL

CRG-10-003

中央から伸びる下線Center Underline

.cg-hv-nav { display: flex; gap: 28px; }
.cg-hv-nav a {
  position: relative;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1B1A17;
  text-decoration: none;
}
.cg-hv-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2.5px;
  background: #E8590C;
  transform: translateX(-50%);
  transition: width .28s ease;
}
.cg-hv-nav a:hover::after { width: 100%; }

<nav class="cg-hv-nav"><a href="#">HOME</a><a href="#">WORKS</a><a href="#">CONTACT</a></nav>

GROSS WT. 543 B ORIGINAL

CRG-10-004

円が広がるアイコンCircle Expand

.cg-hv-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  transition: color .25s;
}
.cg-hv-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #E8590C;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.3, 1.3, .6, 1);
  z-index: -1;
}
.cg-hv-circle:hover { color: #fff; }
.cg-hv-circle:hover::before { transform: scale(1); }

<a href="#" class="cg-hv-circle" aria-label="共有"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></a>

GROSS WT. 941 B ORIGINAL

CRG-10-005

文字が入れ替わるリンクText Swap

.cg-hv-swap {
  display: inline-block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #1B1A17;
  text-decoration: none;
}
.cg-hv-swap span {
  position: relative;
  display: inline-block;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-swap span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  color: #E8590C;
}
.cg-hv-swap:hover span { transform: translateY(-100%); }

<a href="#" class="cg-hv-swap"><span data-text="VIEW MORE">VIEW MORE</span></a>

GROSS WT. 546 B ORIGINAL

CRG-10-006

HOVER

枠線が描かれるホバーBorder Draw

.cg-hv-draw {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 46px;
  font-weight: 900;
  letter-spacing: .12em;
  cursor: pointer;
  background:
    linear-gradient(#E8590C, #E8590C) no-repeat 0 0 / 0 3px,
    linear-gradient(#E8590C, #E8590C) no-repeat 100% 0 / 3px 0,
    linear-gradient(#E8590C, #E8590C) no-repeat 100% 100% / 0 3px,
    linear-gradient(#E8590C, #E8590C) no-repeat 0 100% / 3px 0,
    #fff;
  transition: background-size .35s ease;
}
.cg-hv-draw:hover {
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}

<div class="cg-hv-draw">HOVER</div>

GROSS WT. 634 B ORIGINAL

CRG-10-007

作品タイトル
2026 / Web Design

キャプションせり上がりCaption Rise

.cg-hv-cap {
  position: relative;
  margin: 0;
  width: 200px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-cap-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3A5A78, #1E3247);
}
.cg-hv-cap figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(27, 26, 23, .82);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cg-hv-cap figcaption small { font-weight: 400; opacity: .75; }
.cg-hv-cap:hover figcaption { transform: translateY(0); }

<figure class="cg-hv-cap"><div class="cg-hv-cap-img"></div><figcaption>作品タイトル<br><small>2026 / Web Design</small></figcaption></figure>

GROSS WT. 765 B ORIGINAL

CRG-10-008

ふわり

影がにじむホバーSoft Shadow Grow

.cg-hv-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 44px;
  font-weight: 700;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(27, 26, 23, .1);
  cursor: pointer;
  transition: box-shadow .35s ease, transform .35s ease;
}
.cg-hv-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(232, 89, 12, .25);
}

<div class="cg-hv-soft">ふわり</div>

GROSS WT. 439 B ORIGINAL

CRG-10-009

他がぼやけるギャラリーFocus Blur Siblings

.cg-hv-blurset { display: flex; gap: 12px; }
.cg-hv-blurset i {
  width: 62px;
  height: 84px;
  border-radius: 10px;
  background: linear-gradient(160deg, #C89B6C, #8A6A44);
  transition: filter .3s ease, transform .3s ease;
  cursor: pointer;
}
.cg-hv-blurset i:nth-child(2) { background: linear-gradient(160deg, #E8590C, #B84508); }
.cg-hv-blurset i:nth-child(3) { background: linear-gradient(160deg, #3A5A78, #1E3247); }
.cg-hv-blurset:hover i { filter: blur(3px) grayscale(.5); }
.cg-hv-blurset i:hover {
  filter: none;
  transform: scale(1.08);
}

<div class="cg-hv-blurset"><i></i><i></i><i></i></div>

GROSS WT. 607 B ORIGINAL

CRG-10-010

スタンプ押印ホバーStamp Press

.cg-hv-stamp {
  position: relative;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
.cg-hv-stamp span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #B8261C;
  border: 3px double #B8261C;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  transform: scale(2.4) rotate(-14deg);
  opacity: 0;
  transition: transform .18s cubic-bezier(.4, 0, 1, 1), opacity .14s;
}
.cg-hv-stamp:hover span {
  transform: scale(1) rotate(-8deg);
  opacity: 1;
}

<button class="cg-hv-stamp" type="button">承認する<span aria-hidden="true">APPROVED</span></button>

GROSS WT. 811 B ORIGINAL

CRG-10-011

VIEW PROJECT

暗転テキスト表示Dim & Reveal

.cg-hv-dim {
  position: relative;
  width: 200px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-dim i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2B8A78, #14453C);
  transition: filter .3s ease, transform .3s ease;
}
.cg-hv-dim span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}
.cg-hv-dim:hover i { filter: brightness(.45); transform: scale(1.06); }
.cg-hv-dim:hover span { opacity: 1; }

<div class="cg-hv-dim"><i></i><span>VIEW PROJECT</span></div>

GROSS WT. 707 B ORIGINAL

CRG-10-012

ENTRY

斜め背景スライドSkew Background

.cg-hv-skew {
  position: relative;
  display: inline-block;
  padding: 15px 44px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  text-decoration: none;
  overflow: hidden;
  transition: color .3s;
}
.cg-hv-skew::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: #1B1A17;
  transform: translateX(-105%) skewX(-16deg);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-skew span { position: relative; }
.cg-hv-skew:hover { color: #F2B707; }
.cg-hv-skew:hover::before { transform: translateX(0) skewX(0); }

<a href="#" class="cg-hv-skew"><span>ENTRY</span></a>

GROSS WT. 664 B ORIGINAL

CRG-10-013

PROJECT 01

円形クリップリビールCircle Clip Reveal

.cg-hv-clip {
  position: relative;
  width: 200px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: #EFECE4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cg-hv-clip i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E8590C, #C2426B);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .45s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-clip b {
  position: relative;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1B1A17;
  transition: color .3s;
}
.cg-hv-clip:hover i { clip-path: circle(75% at 50% 50%); }
.cg-hv-clip:hover b { color: #fff; }

<div class="cg-hv-clip"><i></i><b>PROJECT 01</b></div>

GROSS WT. 721 B ORIGINAL

CRG-10-014

アイコン入れ替わりボタンIcon Swap

.cg-hv-swapicon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.cg-hv-swapicon i {
  position: relative;
  width: 15px;
  height: 15px;
  overflow: hidden;
  font-style: normal;
}
.cg-hv-swapicon svg {
  position: absolute;
  inset: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-swapicon svg:last-child { transform: translate(-130%, 130%); }
.cg-hv-swapicon:hover svg:first-child { transform: translate(130%, -130%); }
.cg-hv-swapicon:hover svg:last-child { transform: translate(0, 0); }

<button class="cg-hv-swapicon" type="button">送信<i aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></i></button>

GROSS WT. 1185 B ORIGINAL

CRG-10-015

HOVER

角から染まるホバーCorner Fill

.cg-hv-corner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 46px;
  font-weight: 900;
  letter-spacing: .12em;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}
.cg-hv-corner::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F2B707;
  transform: scale(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-corner:hover::before { transform: scale(9); }
.cg-hv-corner span { position: relative; }

<div class="cg-hv-corner"><span>HOVER</span></div>

GROSS WT. 713 B ORIGINAL

CRG-10-016

ABOUT

ホバーで波打つ文字Wave on Hover

.cg-hv-wavetext {
  display: inline-flex;
  gap: 2px;
  font-size: 21px;
  font-weight: 900;
  color: #1B1A17;
  text-decoration: none;
  padding: 6px 4px;
}
.cg-hv-wavetext span { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), color .3s; }
.cg-hv-wavetext:hover span { transform: translateY(-6px); color: #E8590C; }
.cg-hv-wavetext:hover span:nth-child(2) { transition-delay: .05s; }
.cg-hv-wavetext:hover span:nth-child(3) { transition-delay: .1s; }
.cg-hv-wavetext:hover span:nth-child(4) { transition-delay: .15s; }
.cg-hv-wavetext:hover span:nth-child(5) { transition-delay: .2s; }

<a href="#" class="cg-hv-wavetext" aria-label="ABOUT"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a>

GROSS WT. 723 B ORIGINAL

CRG-10-017

SHIFT

枠がずれるホバーFrame Shift

.cg-hv-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 46px;
  font-weight: 900;
  letter-spacing: .14em;
  background: #fff;
  border: 2.5px solid #1B1A17;
  cursor: pointer;
}
.cg-hv-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid #E8590C;
  transform: translate(6px, 6px);
  transition: transform .25s cubic-bezier(.3, 1.2, .5, 1);
  pointer-events: none;
}
.cg-hv-frame:hover::before { transform: translate(-6px, -6px); }

<div class="cg-hv-frame">SHIFT</div>

GROSS WT. 572 B ORIGINAL

CRG-10-018

モノクロ→カラーGrayscale Reveal

.cg-hv-mono {
  width: 200px;
  height: 124px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8590C, #F2B707 50%, #3A9BD5);
  filter: grayscale(1) contrast(.9);
  transition: filter .45s ease, transform .45s ease;
  cursor: pointer;
}
.cg-hv-mono:hover {
  filter: grayscale(0);
  transform: scale(1.03);
}

<div class="cg-hv-mono"></div>

GROSS WT. 352 B ORIGINAL

CRG-10-019

OPENSECRET INSIDE

上下に割れるホバーSplit Reveal

.cg-hv-split {
  position: relative;
  width: 210px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: #E8590C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cg-hv-split span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #fff;
}
.cg-hv-split i,
.cg-hv-split b {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #fff;
  border: 2px solid #1B1A17;
  z-index: 1;
  transition: transform .4s cubic-bezier(.6, 0, .3, 1);
}
.cg-hv-split i { top: 0; border-bottom: none; border-radius: 12px 12px 0 0; }
.cg-hv-split b {
  bottom: 0;
  border-top: none;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .16em;
  padding-top: 2px;
}
.cg-hv-split:hover i { transform: translateY(-100%); }
.cg-hv-split:hover b { transform: translateY(100%); }

<div class="cg-hv-split"><i></i><b>OPEN</b><span>SECRET INSIDE</span></div>

GROSS WT. 1019 B ORIGINAL

CRG-10-020

くるっと一回転アイコンSpin Once

.cg-hv-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  background: #fff;
  transition: color .3s, background .3s;
}
.cg-hv-spin svg { transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.cg-hv-spin:hover { background: #1B1A17; color: #F2B707; }
.cg-hv-spin:hover svg { transform: rotate(180deg); }

<a href="#" class="cg-hv-spin" aria-label="設定"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></a>

GROSS WT. 1272 B ORIGINAL

CRG-10-021

発光ボーダートレースGlow Border Trace

.cg-hv-glow {
  position: relative;
  padding: 14px 32px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #1B1A17;
  background: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  z-index: 0;
}
.cg-hv-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: conic-gradient(from 0deg, #E8590C, #F2B707, #3A5A78, #E8590C);
  z-index: -1;
  opacity: 0;
  animation: cg-hv-glow-spin 2.4s linear infinite;
  animation-play-state: paused;
  transition: opacity .3s ease;
}
.cg-hv-glow::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  background: #fff;
  z-index: -1;
}
.cg-hv-glow:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes cg-hv-glow-spin {
  to { transform: rotate(360deg); }
}

<button class="cg-hv-glow">SUBMIT</button>

GROSS WT. 851 B ORIGINAL

CRG-10-022

TARGET LOCK

コーナーが開くフォーカス枠Focus Reticle Corners

.cg-hv-reticle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 92px;
  cursor: pointer;
}
.cg-hv-reticle p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #1B1A17;
}
.cg-hv-rc {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid #E8590C;
  transition: inset .3s cubic-bezier(.3, 1.2, .4, 1);
}
.cg-hv-rc.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.cg-hv-rc.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.cg-hv-rc.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.cg-hv-rc.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.cg-hv-reticle:hover .cg-hv-rc.tl { top: 0; left: 0; }
.cg-hv-reticle:hover .cg-hv-rc.tr { top: 0; right: 0; }
.cg-hv-reticle:hover .cg-hv-rc.bl { bottom: 0; left: 0; }
.cg-hv-reticle:hover .cg-hv-rc.br { bottom: 0; right: 0; }

<div class="cg-hv-reticle"><span class="cg-hv-rc tl"></span><span class="cg-hv-rc tr"></span><span class="cg-hv-rc bl"></span><span class="cg-hv-rc br"></span><p>TARGET LOCK</p></div>

GROSS WT. 1168 B ORIGINAL

CRG-10-023

封が開く荷札ホバーParcel Seal Open

.cg-hv-seal {
  position: relative;
  display: block;
  width: 216px;
  padding: 0;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  background: #F5F2EA;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 0 -6px rgba(27, 26, 23, .22);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}
.cg-hv-seal:hover,
.cg-hv-seal:focus-visible { transform: translateY(-6px); box-shadow: 0 20px 26px -14px rgba(27, 26, 23, .45); }
.cg-hv-seal:focus-visible { outline: 3px solid #3A5A78; outline-offset: 3px; }
.cg-hv-seal-face {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  text-align: left;
}
.cg-hv-seal-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #3A5A78;
}
/* 中身の文言: 封が割れたあと、少し遅れてばねで立ち上がる */
.cg-hv-seal-note {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #1B1A17;
  opacity: .2;
  transform: translateY(8px);
  transition: opacity .4s ease .14s, transform .45s cubic-bezier(.34, 1.56, .64, 1) .14s;
}
.cg-hv-seal:hover .cg-hv-seal-note,
.cg-hv-seal:focus-visible .cg-hv-seal-note { opacity: 1; transform: translateY(0); }
/* 封緘テープ: 左右に割れて荷札が開く */
.cg-hv-seal-tape {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 50%;
  background: repeating-linear-gradient(-45deg, #E8590C 0 9px, #C74A08 9px 18px);
  transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}
.cg-hv-seal-tape.l { left: 0; box-shadow: inset -2px 0 0 rgba(27, 26, 23, .4); }
.cg-hv-seal-tape.r { right: 0; box-shadow: inset 2px 0 0 rgba(27, 26, 23, .4); }
.cg-hv-seal:hover .cg-hv-seal-tape.l,
.cg-hv-seal:focus-visible .cg-hv-seal-tape.l { transform: translateX(-101%); }
.cg-hv-seal:hover .cg-hv-seal-tape.r,
.cg-hv-seal:focus-visible .cg-hv-seal-tape.r { transform: translateX(101%); }
/* 検品チェック: 最後にばねで飛び出す */
.cg-hv-seal-mark {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 22px;
  height: 12px;
  margin-top: -11px;
  border: solid #2F8A59;
  border-width: 0 0 4px 4px;
  transform: rotate(-45deg) scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .3s;
}
.cg-hv-seal:hover .cg-hv-seal-mark,
.cg-hv-seal:focus-visible .cg-hv-seal-mark { transform: rotate(-45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .cg-hv-seal,
  .cg-hv-seal-note,
  .cg-hv-seal-tape,
  .cg-hv-seal-mark { transition: none; }
  .cg-hv-seal-note { opacity: .2; transform: none; }
}

<button class="cg-hv-seal" type="button" aria-label="検品済みの荷札を開く">
  <span class="cg-hv-seal-face">
    <span class="cg-hv-seal-code">SKU / CRG-0842</span>
    <span class="cg-hv-seal-note">INSPECTED</span>
  </span>
  <span class="cg-hv-seal-tape l" aria-hidden="true"></span>
  <span class="cg-hv-seal-tape r" aria-hidden="true"></span>
  <span class="cg-hv-seal-mark" aria-hidden="true"></span>
</button>

GROSS WT. 3023 B ORIGINAL

CRG-10-024

ブラインドが開くホバーBlind Slat Reveal

.cg-hv-slat {
  position: relative;
  display: block;
  width: 232px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  perspective: 700px;
  text-decoration: none;
  background: #1B1A17;
  border: 2px solid #1B1A17;
  box-shadow: 0 12px 18px -10px rgba(27, 26, 23, .55);
  transition: box-shadow .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-hv-slat:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 22px 28px -14px rgba(27, 26, 23, .6);
}
.cg-hv-slat:focus-visible { outline: 3px solid #E8590C; outline-offset: 3px; }
/* 裏板: スラットが返ったあとに、少し遅れてせり出す */
.cg-hv-slat-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 92% at 50% 0%, #3A5A78, #1B1A17 72%);
  color: #F5F2EA;
  font: 700 15px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  opacity: 0;
  transform: scale(1.08);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .2s, opacity .3s ease .2s;
}
/* スラット5枚: 上端を軸に、上から順番に返る */
.cg-hv-slat-blind {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.cg-hv-slat-blind i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 20%);
  height: 20.4%;
  background: linear-gradient(180deg, #E8590C, #C24A08);
  border-bottom: 1px solid rgba(27, 26, 23, .38);
  transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
  transition-delay: calc(var(--i) * 70ms);
}
/* 表側のラベル: 開くと沈んで消える */
.cg-hv-slat-front {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #F2B707;
  color: #1B1A17;
  font: 700 13px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .28s ease;
}
.cg-hv-slat:is(:hover, :focus-visible) .cg-hv-slat-plate { opacity: 1; transform: scale(1); }
.cg-hv-slat:is(:hover, :focus-visible) .cg-hv-slat-blind i { transform: rotateX(-96deg); opacity: .12; }
.cg-hv-slat:is(:hover, :focus-visible) .cg-hv-slat-front { transform: translateY(10px) scale(.86); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cg-hv-slat,
  .cg-hv-slat-plate,
  .cg-hv-slat-blind i,
  .cg-hv-slat-front { transition: none; }
  .cg-hv-slat:is(:hover, :focus-visible) { transform: none; }
}

<a class="cg-hv-slat" href="#" aria-label="積荷マニフェストを見る"><span class="cg-hv-slat-plate" aria-hidden="true">VIEW MANIFEST</span><span class="cg-hv-slat-blind" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="cg-hv-slat-front" aria-hidden="true">CARGO No.24</span></a>

GROSS WT. 2887 B ORIGINAL

CRG-10-025

磁力で浮くCTAボタンMagnetic CTA

/* ホバーで「浮く→光沢が横切る→矢印が押し出される」の3段。押下時だけ潰して(scale 1.03/.94)
   物としての重みを出す。厚み影を同時に縮めて浮遊感を支える */
.cg-hv-magnet {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  color: #FFF6EE;
  background: #E8590C;
  font: 700 15px/1 "M PLUS 1", system-ui, sans-serif;
  box-shadow: 0 6px 0 -1px rgba(120, 44, 0, .55), 0 12px 18px -10px rgba(27, 26, 23, .6);
  transition:
    transform .44s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .44s cubic-bezier(.34, 1.56, .64, 1),
    background-color .3s ease;
}
.cg-hv-magnet-label {
  position: relative;
  transition: transform .44s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-hv-magnet-arrow {
  position: relative;
  display: inline-flex;
  transition: transform .44s cubic-bezier(.34, 1.56, .64, 1);
}
.cg-hv-magnet-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .5) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22, .61, .36, 1);
}
.cg-hv-magnet:is(:hover, :focus-visible) {
  transform: translateY(-4px) scale(1.03);
  background-color: #F4761F;
  box-shadow: 0 10px 0 -1px rgba(120, 44, 0, .4), 0 22px 26px -14px rgba(27, 26, 23, .6);
}
.cg-hv-magnet:is(:hover, :focus-visible) .cg-hv-magnet-gloss { transform: translateX(120%); }
.cg-hv-magnet:is(:hover, :focus-visible) .cg-hv-magnet-label { transform: translateX(-3px); }
.cg-hv-magnet:is(:hover, :focus-visible) .cg-hv-magnet-arrow { transform: translateX(5px); }
.cg-hv-magnet:active {
  transform: translateY(1px) scale(1.03, .94);
  transition-duration: .12s;
}
.cg-hv-magnet:focus-visible {
  outline: 3px solid #1B1A17;
  outline-offset: 3px;
}
/* 静止形: 動かさず、色と矢印位置だけで押せることを伝える */
@media (prefers-reduced-motion: reduce) {
  .cg-hv-magnet,
  .cg-hv-magnet-label,
  .cg-hv-magnet-arrow,
  .cg-hv-magnet-gloss { transition: none; }
  .cg-hv-magnet:is(:hover, :focus-visible, :active) {
    transform: none;
    box-shadow: 0 6px 0 -1px rgba(120, 44, 0, .55), 0 12px 18px -10px rgba(27, 26, 23, .6);
  }
  .cg-hv-magnet:is(:hover, :focus-visible) .cg-hv-magnet-gloss { transform: translateX(-120%); }
  .cg-hv-magnet:is(:hover, :focus-visible) .cg-hv-magnet-label { transform: none; }
}

<button type="button" class="cg-hv-magnet">
  <span class="cg-hv-magnet-gloss" aria-hidden="true"></span>
  <span class="cg-hv-magnet-label">出荷を確定する</span>
  <span class="cg-hv-magnet-arrow" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h13"/><path d="M11 6l6 6-6 6"/></svg>
  </span>
</button>

GROSS WT. 2981 B ORIGINAL

ホバー演出25点 在庫あり