04Long-press delay reveal (no fill bar)
Nothing happens the instant you press — a transition-delay of 600ms holds the response back, then the card grows and its shadow deepens, telling a short tap apart from a long hold, with no filling progress bar.
Best forCards that preview a context menu, where an accidental short tap should trigger nothing
:active + transition 지연touch-action: none0.6초
<main class="stage">
<div class="card is-demo" tabindex="0">More</div>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-quick; // 문턱을 넘은 뒤 반응이 실제로 펼쳐지는 시간
$hold: $dur-enter; // 반응이 시작되기까지 참는 시간 (누르는 순간엔 아무 일도 없다)
$easing: $ease-pop;
$color: $subject-blue;
@include stage($stage-paper);
.stage { padding: clamp(8px, 4vw, 24px); }
.card {
position: relative;
width: min(180px, 60vw);
border-radius: $r-card;
background: $subject-cream;
border: 2px solid rgba($stage-ink, .12);
padding: 22px 16px;
text-align: center;
font-weight: 600; font-size: 15px; line-height: 1.4; font-family: inherit;
color: $stage-ink;
cursor: pointer;
touch-action: none; // 누르는 동안 스크롤 제스처와 겹치지 않게
transform: scale(1);
box-shadow: none;
// transition-delay 가 곧 "길게 눌러야만" 반응하는 문턱이다. 진행바를 채우지 않는다.
transition: transform $duration $easing $hold,
box-shadow $duration $easing $hold,
border-color $duration $easing $hold;
// 규칙8 한 겹: 문턱을 넘어 반응이 펼쳐지는 순간 카드 바깥으로 두 겹 링이 불규칙하게 번지다 감쇠
&::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba($color, .45), 0 0 0 0 rgba($color, .26);
opacity: 0;
pointer-events: none;
}
}
.card:active {
transform: scale(1.06);
box-shadow: $shadow-raised;
border-color: $color;
}
.card:active::after {
animation: ripple-wave $dur-enter $easing $hold;
}
.card:focus-visible {
outline: 3px solid $color;
outline-offset: 3px;
}
.card.is-demo {
animation: long-press-loop $dur-loop $easing infinite;
}
.card.is-demo::after {
animation: ripple-loop $dur-loop $easing infinite;
}
@keyframes long-press-loop {
0%, 30% { transform: scale(1); box-shadow: none; border-color: rgba($stage-ink, .12); }
70%, 85% { transform: scale(1.06); box-shadow: $shadow-raised; border-color: $color; }
100% { transform: scale(1); box-shadow: none; border-color: rgba($stage-ink, .12); }
}
@keyframes ripple-wave {
0% { box-shadow: 0 0 0 0 rgba($color, .45), 0 0 0 0 rgba($color, .26); opacity: 1; }
38% { box-shadow: 0 0 0 10px rgba($color, .2), 0 0 0 4px rgba($color, .24); opacity: .72; }
66% { box-shadow: 0 0 0 17px rgba($color, .09), 0 0 0 11px rgba($color, .14); opacity: .34; }
100% { box-shadow: 0 0 0 24px rgba($color, 0), 0 0 0 20px rgba($color, 0); opacity: 0; }
}
@keyframes ripple-loop {
0%, 30% { box-shadow: 0 0 0 0 rgba($color, .45), 0 0 0 0 rgba($color, .26); opacity: 1; }
50% { box-shadow: 0 0 0 10px rgba($color, .2), 0 0 0 4px rgba($color, .24); opacity: .72; }
67% { box-shadow: 0 0 0 17px rgba($color, .09), 0 0 0 11px rgba($color, .14); opacity: .34; }
85%, 100% { box-shadow: 0 0 0 24px rgba($color, 0), 0 0 0 20px rgba($color, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.card { transition: none; }
.card::after { animation: none !important; opacity: 0; }
.card.is-demo { animation: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.stage {
padding: clamp(8px, 4vw, 24px);
}
.card {
position: relative;
width: min(180px, 60vw);
border-radius: 16px;
background: #fff7e6;
border: 2px solid rgba(23, 20, 26, 0.12);
padding: 22px 16px;
text-align: center;
font-weight: 600;
font-size: 15px;
line-height: 1.4;
font-family: inherit;
color: #17141a;
cursor: pointer;
touch-action: none;
transform: scale(1);
box-shadow: none;
transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1) 600ms, box-shadow 220ms cubic-bezier(0.2, 1.4, 0.4, 1) 600ms, border-color 220ms cubic-bezier(0.2, 1.4, 0.4, 1) 600ms;
}
.card::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.45), 0 0 0 0 rgba(47, 109, 246, 0.26);
opacity: 0;
pointer-events: none;
}
.card:active {
transform: scale(1.06);
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
border-color: #2f6df6;
}
.card:active::after {
animation: ripple-wave 600ms cubic-bezier(0.2, 1.4, 0.4, 1) 600ms;
}
.card:focus-visible {
outline: 3px solid #2f6df6;
outline-offset: 3px;
}
.card.is-demo {
animation: long-press-loop 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
.card.is-demo::after {
animation: ripple-loop 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
@keyframes long-press-loop {
0%, 30% {
transform: scale(1);
box-shadow: none;
border-color: rgba(23, 20, 26, 0.12);
}
70%, 85% {
transform: scale(1.06);
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
border-color: #2f6df6;
}
100% {
transform: scale(1);
box-shadow: none;
border-color: rgba(23, 20, 26, 0.12);
}
}
@keyframes ripple-wave {
0% {
box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.45), 0 0 0 0 rgba(47, 109, 246, 0.26);
opacity: 1;
}
38% {
box-shadow: 0 0 0 10px rgba(47, 109, 246, 0.2), 0 0 0 4px rgba(47, 109, 246, 0.24);
opacity: 0.72;
}
66% {
box-shadow: 0 0 0 17px rgba(47, 109, 246, 0.09), 0 0 0 11px rgba(47, 109, 246, 0.14);
opacity: 0.34;
}
100% {
box-shadow: 0 0 0 24px rgba(47, 109, 246, 0), 0 0 0 20px rgba(47, 109, 246, 0);
opacity: 0;
}
}
@keyframes ripple-loop {
0%, 30% {
box-shadow: 0 0 0 0 rgba(47, 109, 246, 0.45), 0 0 0 0 rgba(47, 109, 246, 0.26);
opacity: 1;
}
50% {
box-shadow: 0 0 0 10px rgba(47, 109, 246, 0.2), 0 0 0 4px rgba(47, 109, 246, 0.24);
opacity: 0.72;
}
67% {
box-shadow: 0 0 0 17px rgba(47, 109, 246, 0.09), 0 0 0 11px rgba(47, 109, 246, 0.14);
opacity: 0.34;
}
85%, 100% {
box-shadow: 0 0 0 24px rgba(47, 109, 246, 0), 0 0 0 20px rgba(47, 109, 246, 0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card::after {
animation: none !important;
opacity: 0;
}
.card.is-demo {
animation: none;
}
}import type { CSSProperties } from "react";
import styles from "./LongPressCard.module.scss";
export type LongPressCardProps = {
label: string;
/** 문턱을 넘은 뒤 반응이 펼쳐지는 시간 (기본 220ms) */
duration?: number;
/** 반응이 시작되기까지 참는 시간 — 누르는 순간엔 아무 일도 없다 (기본 600ms) */
hold?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & {
"--duration"?: string;
"--hold"?: string;
"--easing"?: string;
"--color"?: string;
};
export default function LongPressCard({
label,
duration = 220,
hold = 600,
easing = "cubic-bezier(.2,1.4,.4,1)",
color = "#2f6df6",
}: LongPressCardProps) {
const vars: Vars = {
"--duration": `${duration}ms`,
"--hold": `${hold}ms`,
"--easing": easing,
"--color": color,
};
return (
<div className={styles.card} style={vars} tabIndex={0}>
{label}
</div>
);
}04 Long-press delay reveal (no fill bar) — Measured area 10.674% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · 9 CSS Button Click Feedback Effects, Copy-Paste
The post this demo lives in
9 CSS Button Click Feedback Effects, Copy-PasteCSS button click feedback is the flash, scale, or color shift a button shows the instant it's pressed, confirming a tap See all demos in this post
