Interactive Hover Button
Interactive Hover Button is a button in the UI HUB buttons collection. An interactive button featuring a dot-scaling hover animation. On hover, the background dot scales up to fill the container, while text shifts and fades to reveal centered text and an action icon with smooth transition springs.
The component is driven by 6 documented props (text, loadingText, successText, variant, icon, classes), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Spring physics layout constraints; AnimatePresence client transitions; Overflow hidden button container.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Interactive Hover Button?
High-performance interactive hover button with expandable dot background and sliding icon animations.
Interactive Hover Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion, clsx and tailwind-merge
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 6
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Interactive Hover Button works
An interactive button featuring a dot-scaling hover animation. On hover, the background dot scales up to fill the container, while text shifts and fades to reveal centered text and an action icon with smooth transition springs.
Technical information for Interactive Hover Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion, clsx and tailwind-merge |
| Styling | Tailwind CSS |
| Language | TypeScript |
| State change | pill button with colored dot to solid colored button with shifting text + sliding icon |
| Props | 6 configurable |
| Usage example | Included on this page |
What Interactive Hover Button requires
- Spring physics layout constraints
- AnimatePresence client transitions
- Overflow hidden button container
- Dynamic icon support
How to use Interactive Hover Button
- Install the dependencies: npm install framer-motion and npm install clsx and npm install tailwind-merge.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <InteractiveHoverButton /> in your page using that import path.
- Pass any of the 6 documented props to change colours, density, speed or behaviour.
Interactive Hover Button questions
What is Interactive Hover Button?
High-performance interactive hover button with expandable dot background and sliding icon animations.
How does Interactive Hover Button work?
An interactive button featuring a dot-scaling hover animation. On hover, the background dot scales up to fill the container, while text shifts and fades to reveal centered text and an action icon with smooth transition springs.
Which category does Interactive Hover Button belong to?
Interactive Hover Button is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the text prop do in Interactive Hover Button?
Label text shown in the idle button. It defaults to "Button".
What does the loadingText prop do in Interactive Hover Button?
Text shown during the loading state. It defaults to "Processing...".
Is Interactive Hover Button free to use?
Interactive Hover Button is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Interactive Hover Button use?
Interactive Hover Button uses Framer Motion, clsx and tailwind-merge and is styled with Tailwind CSS.
What does Interactive Hover Button need to run?
Interactive Hover Button needs Spring physics layout constraints, AnimatePresence client transitions, Overflow hidden button container and Dynamic icon support.