On click, a CSS keyframe animation fires — squishing the button horizontally then snapping back with an overshoot oscillation that simulates spring physics. The animation is re-triggered cleanly on every click by removing and re-adding the data attribute with a forced reflow. No dependencies.
Goal: Create an "Elastic Press" button animation.
Visual behavior: On every click, the button squishes and bounces back with spring-like overshoot — simulating a physical press with elastic rebound. The keyframe sequence is: compress horizontally (scaleX 0.90, scaleY 0.92) → overshoot wide (scaleX 1.08, scaleY 0.96) → overshoot tall (scaleX 0.97, scaleY 1.04) → settle wide (scaleX 1.03, scaleY 0.98) → settle tall (scaleX 0.99, scaleY 1.01) → rest. The button is white with a pill/rounded shape.
Technique: Inject a @keyframes btn-elastic-press rule via a style tag once. On click, remove data-pressing attribute, force a reflow (void btn.offsetWidth), then re-add data-pressing. A CSS rule [data-btn="elastic-press"][data-pressing] applies the 500ms animation. After 510ms, remove data-pressing. This pattern re-triggers the animation on every click. Use a useRef for the button element.
Accessibility: Under prefers-reduced-motion, the animation is replaced with a simple scale(0.96) transform with no oscillation.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.