Components / KATAYABURI / Jelly Buttons

Jelly Buttons beta

Buttons made of jelly: they squash on the press, overshoot on the release, and wobble home.

Preview

Hover is a lean, press is a squash, release is the wobble home.

<div style="display:flex;gap:13px;flex-wrap:wrap;align-items:center;padding:8px 0">
  <button class="k-jelly" type="button">Squish me</button>
  <button class="k-jelly teal" type="button">Me too</button>
  <button class="k-jelly soft" type="button">Reluctantly</button>
</div>
<p style="font-size:12.5px;color:var(--k-ink-3);margin-top:6px">Hover is a lean, press is a squash, release is the wobble home.</p>
/* KATA Jelly Buttons — KATAYABURI. Dessert-grade controls. */
.k-jelly{display:inline-block;border:0;cursor:pointer;font-family:var(--k-font);font-weight:650;font-size:14.5px;padding:13px 26px;border-radius:14px;background:var(--k-ink);color:var(--k-bg);transition:transform .28s cubic-bezier(.3,2.4,.45,1)}
.k-jelly:hover{transform:scale(1.07,.92)}
.k-jelly:active{transform:scale(.88,1.12)}
.k-jelly.teal{background:var(--k-accent);color:var(--k-on-color)}
.k-jelly.soft{background:var(--k-bg-soft);color:var(--k-ink);border:1px solid var(--k-line)}
.k-jelly.squish{animation:k-jelly-wob .55s cubic-bezier(.3,2.2,.45,1)}
@keyframes k-jelly-wob{0%{transform:scale(1,1)}25%{transform:scale(1.18,.78)}50%{transform:scale(.92,1.1)}72%{transform:scale(1.05,.97)}100%{transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){.k-jelly{transition:none}.k-jelly:hover,.k-jelly:active{transform:none}.k-jelly.squish{animation:none}}

// KATA Jelly Buttons — a full wobble on every press.
document.querySelectorAll('.k-jelly').forEach(function (b) {
  b.addEventListener('click', function () {
    b.classList.remove('squish');
    void b.offsetWidth;
    b.classList.add('squish');
  });
  b.addEventListener('animationend', function () { b.classList.remove('squish'); });
});

Installation

CLI

node kata-ui.mjs add jelly-buttons

Writes the part’s CSS and JS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs. The part has a script — include it after the markup; it initializes itself.

Usage

An elastic timing curve and a squish keyframe turn the most serious control on the page into dessert. Use it where the brand is allowed to grin — a game, a toy, a checkout that just succeeded. Keep it away from the delete button; some actions should feel like actions.

Accessibility

The jelly is transform-only: size, name, focus and order are untouched, and the keyboard press is as dignified as any other button. Under prefers-reduced-motion the wobble is off and the buttons are, sadly, professional.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-jellyclass
.tealclass
.softclass
.squishclass

Related parts

Bounce Letters beta

A headline whose letters hop when touched — and do the wave when you click.

lettersbouncetextheadlineplayful

Carousel Ring beta

A merry-go-round of cards in real 3D: eight panels riding a ring that never stops turning.

carousel3dringcardsrotate

Confetti Cannon beta

A button that fires confetti out of both corners of its stage. You already pressed it twice.

confetticelebrationcanvasbuttonparty

Fireworks beta

Click the night and it blooms: rockets, bursts and falling sparks on one canvas.

fireworkscanvascelebrationnightinteractive
Previous
Gravity Playground