jelly button

preview

filled colors

outlined colors

sizes and states

usage

Copy the component, add the jelly keyframe to the global stylesheet, and render it wherever an HTML button would be used.

import { JellyButton } from "@/components/jelly/jelly-button"

export function SaveButton() {
  return (
    <JellyButton color="pink" size="md">
      save changes
    </JellyButton>
  )
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the small cn class-name helper included by the copy action.

Add this animation to the global stylesheet for the click response:

@keyframes jelly-bounce {
  0%   { transform: scale(1, 1); opacity: 1; }
  20%  { transform: scale(0.92, 1.08); }
  40%  { transform: scale(1.05, 0.95); }
  60%  { transform: scale(0.98, 1.02); }
  80%  { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); opacity: 1; }
}

props

proptypedefaultpurpose
color"pink" | "blue" | "green" | "yellow" | "orange" | "red""pink"Sets the jelly tint and shadow color.
size"sm" | "md" | "lg""md"Controls padding, text size, and radius.
outlinedbooleanfalseUses the transparent outlined style.
disabledbooleanfalseDisables interaction and lowers emphasis.