Press feedback and holdPress feedback and hold

How much should a button give?

Press each button, then change the duration.

.btn {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

Delete: click vs. hold

Click each once by accident, then hold the right one.

Keep the button pressed until it fills to confirm. Release early to cancel.

.hold { position: relative; overflow: hidden; }
.hold .fill {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hold[data-holding] .fill {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2s linear;
}

Press slow, release fast

Hold each halfway, let go, and compare the drain.

.fill                  { transition: clip-path 200ms var(--ease-out); } /* release */
[data-holding] .fill   { transition: clip-path 2s linear; }             /* press   */

Why it matters, pros and cons