Coyote Labby Coyote Concept

NewCSS + small JS · keyframes · scale

Jelly

Squashes when pressed and wobbles back into shape, like poking a jelly.

A free jelly button effect in HTML and CSS (with a few lines of JavaScript). Also known as squash and stretch, wobble click animation, rubber band button or bouncy button.

Class
.CCJelly
Weight
0.9 KB
Needs
CSS + a few lines of JS
Best for
Toggles, likes, small buttons, mobile

Tune it

Every snippet on this page follows these settings.

How the Jelly click effect works

  1. Script adds a class on each press and removes it first, so a fast double press plays twice.
  2. One keyframe squashes the element wide and short, then tall and narrow, then settles: a damped wobble.
  3. --cc-intensity scales how far it squashes.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCJelly">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Jelly on button, toggle, tabs, card, dropdown.

More ways to use it

The same class on badge, image card.

The Jelly code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCJelly.is-jelly { animation: ccJelly calc(.65s / var(--cc-speed)) both; }
@keyframes ccJelly {
  25% { transform: scale(calc(1 + .16 * var(--cc-intensity)), calc(1 - .16 * var(--cc-intensity))); }
  45% { transform: scale(calc(1 - .08 * var(--cc-intensity)), calc(1 + .08 * var(--cc-intensity))); }
  65% { transform: scale(calc(1 + .04 * var(--cc-intensity)), calc(1 - .04 * var(--cc-intensity))); }
  80% { transform: scale(.99, 1.01); }
}
@media (prefers-reduced-motion: reduce) { .CCJelly.is-jelly { animation: none; } }
Show the JavaScript
document.querySelectorAll(".CCJelly").forEach(function (el) {
  if (el.dataset.ccJelly) return; el.dataset.ccJelly = 1;
  function wobble() { el.classList.remove("is-jelly"); void el.offsetWidth; el.classList.add("is-jelly"); }
  el.addEventListener("pointerdown", wobble);
  el.addEventListener("keydown", function (e) { if (e.key === "Enter" || e.key === " ") wobble(); });
});

Pairs well with

Avoid on the same element Magnetic (transform), Ember Glow (animation), Shimmer Border (animation), 3D Tilt (transform), Neon (animation), Northern Lights (animation), Stack Pop (transform), Soft Press (transform).

Browser support

Chrome & Edge0+
Safari0+
Firefox0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Feedback only: the press does exactly what it did before.
  • Plays for keyboard presses too.
  • Off under reduced motion.

Performance

  • 0.9 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Jelly

What is a jelly button effect?

Squashes when pressed and wobbles back into shape, like poking a jelly. Jelly is a free jelly button effect, also known as squash and stretch or wobble click animation, that works on buttons, toggles, tab bars, cards and more.

How do you make a jelly button effect in CSS?

Script adds a class on each press and removes it first, so a fast double press plays twice. One keyframe squashes the element wide and short, then tall and narrow, then settles: a damped wobble. --cc-intensity scales how far it squashes.

How do I add Jelly to a button?

Add the class CCJelly next to CCButton, inside an element with the CCTheme class, then include the Jelly CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Jelly need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Jelly?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Jelly accessible?

Feedback only: the press does exactly what it did before. Plays for keyboard presses too. Off under reduced motion.

Can I use Jelly in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCJelly to a button or block, and paste the JavaScript into the footer code area.

Is Jelly free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.