jelly squash stretch elastic bounce click button rubber playful button click feedback fun micro-interaction for icons gamified UI element response elastic press effect on cards buttons need more satisfying click feedback want elastic bounce without spring physics JS need playful squash-stretch animation
Jelly
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/jelly.json Preview
Background
Customize
Quick Start
<button class="jelly px-6 py-3 rounded-lg bg-indigo-600 text-white">Press me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 905 bytes · 48 lines
- Custom Properties
-
--jelly-speed--jelly-intensity - Classes
-
.jelly
jelly squash stretch elastic bounce click button rubber
Squash-and-stretch keyframe animation on :active. The element widens and flattens on press, then oscillates back to shape with dampening. Uses calc() with --jelly-intensity so you can dial it from subtle (0.5) to exaggerated (1.5).
Elastic button
<button class="jelly rounded-xl bg-indigo-600 px-6 py-3 font-medium text-white hover:bg-indigo-500 transition-colors">
Press me
</button>Subtle variant for icons
<button class="jelly inline-flex items-center justify-center rounded-full bg-white/10 p-3" style="--jelly-intensity: 0.6; --jelly-speed: 0.35s;">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/>
</svg>
<span class="sr-only">Like</span>
</button>