On hover, the button morphs from a pill shape to a circle: the width collapses and border-radius transitions to 50%. The text label fades out and a decorative symbol fades in with a spring-bounce entrance. Both transitions are CSS-only.
Create a button that morphs from a pill to a circle on hover. On hover: - Width collapses from ~160px to 56px (matching the fixed height) - border-radius transitions from 28px to 50% - Text label fades out and scales down - A decorative symbol fades in with a spring-bounce entrance (delayed slightly) Both animations use CSS transitions only. No library dependencies.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.