component
Child Button
By Karim Saif
Details
- Karim SaifAuthor
- componentType
- 2026-06-27Published
- 2026-06-27Updated
- 2026-06-27Added
- ButtonsCategories
Summary
About Child Button is a clean, rounded pill-style CTA button with a satisfying hover interaction on hover, the border radius expands and the padding compresses inward, creating a…
Description
About Child Button is a clean, rounded pill-style CTA button with a satisfying hover interaction on hover, the border radius expands and the padding compresses inward, creating a smooth morph effect that feels tactile and refined. Designed to sit well on colorful or vibrant backgrounds. What it does On hover, the button morphs from a standard pill shape into a tighter, more compact form by simultaneously expanding the border radius and reducing the padding. The transition is smooth and subtle, giving the interaction a premium, physical feel without being distracting. What you can customize Full control from the Framer panel: button text, link, open in new tab, background color, text color, fill color, and accent color. No code needed. Great for (examples) Use it anywhere you want a button interaction that feels considered and smooth: * hero sections on colorful backgrounds * SaaS and startup landing pages * portfolio and personal brand sites * product launch pages * waitlist and signup CTAs * pricing sections * app download buttons * Framer template previews Share your build If you ship something cool with it, post it on X and tag me @ karimsaif0 , or send it over. I would love to see what you create. Need help? Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0
Introduction
A soft pill button that morphs
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4450