Morph Icon Button

A glass-pill button whose icon cross-fades to a different icon on hover, in a fixed position.

Buttonsbuttonglassmotionhover

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Dependencies: framer-motion, lucide-react

Overview

Shape

Glass pill — rounded-full, h-9, px-5

Border

border-border/50, bg-foreground/[0.04]

Motion

Spring scale+opacity cross-fade in place

Accessibility

Icons aria-hidden, label is the name