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.