import * as React from "react"

import { cn } from "@/lib/utils"

const keyframes = `@keyframes jelly-button-wobble{0%{transform:scale(1,1)}25%{transform:scale(.88,1.12)}50%{transform:scale(1.1,.9)}70%{transform:scale(.96,1.04)}100%{transform:scale(1,1)}}`

export function JellyButton({ className, children, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      className={cn(
        "group relative inline-flex h-12 items-center justify-center gap-2 rounded-full bg-gradient-to-b from-pink-400 to-rose-500 px-9 text-base font-bold text-white select-none",
        "shadow-[0_6px_0_#be123c,0_12px_20px_rgb(244_63_94/0.4),inset_0_2px_4px_rgb(255_255_255/0.5)]",
        "transition-[transform,box-shadow] duration-150 hover:animate-[jelly-button-wobble_0.6s_ease-out]",
        "active:translate-y-1 active:scale-95 active:shadow-[0_2px_0_#be123c,0_6px_12px_rgb(244_63_94/0.4),inset_0_2px_4px_rgb(255_255_255/0.5)]",
        "focus-visible:ring-2 focus-visible:ring-pink-300 focus-visible:ring-offset-2 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50 motion-reduce:hover:animate-none",
        className
      )}
      {...props}
    >
      <style href="jelly-button" precedence="default">
        {keyframes}
      </style>
      <span aria-hidden className="pointer-events-none absolute top-1.5 left-5 h-2 w-8 rounded-full bg-white/50 blur-[1px]" />
      <span className="relative drop-shadow-sm">{children}</span>
    </button>
  )
}

Install

More like this

Texture Button

Liquid Metal Button

Liquid Glass Button