Jelly Button

A glossy CTA pill that squashes and stretches like jelly when you hover it.

About this tool

A button with weight to it: the face is squeezed between a light inset above and a darker one below, and two blurred specular bars read as glass across the top and bottom. Hovering runs a jello squash-and-stretch that overshoots on both axes before settling. It ships wearing the HorizonX CTA — near-black ink at the pill radius — and every part of that is a control: the stage, the three material stops, the geometry, the highlight inset, the label, and the jello amplitude and duration. Hover and pressed states hold open for design review.

In collections: CSS Buttons & Animated Button Effects Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS All tools

Copy

Label

Button

Face colour

Top inset

Bottom inset

Text colour

Width px

Height px

Radius px

Motion

Jello duration ms

Jello amount

Preview

State

auto idle hover active

Stage

Stage colour

#ffffff