Interactive Hover Button
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
import { InteractiveHoverButton } from '@/registry/magicui/interactive-hover-button'
export function InteractiveHoverButtonDemo() { return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>}Installation
Section titled “Installation”pnpm dlx shadcn@latest add @magicui-solid/interactive-hover-buttonbunx shadcn@latest add @magicui-solid/interactive-hover-buttonyarn dlx shadcn@latest add @magicui-solid/interactive-hover-buttonnpx shadcn@latest add @magicui-solid/interactive-hover-buttonImport
Section titled “Import”import { InteractiveHoverButton } from '@/components/magicui/interactive-hover-button'<InteractiveHoverButton>Interactive Hover Button</InteractiveHoverButton>| Prop | Type | Default | Description |
|---|---|---|---|
class |
string |
- |
Additional class names to style the component |
children |
JSX.Element |
- |
The content to be displayed inside the button |
Credits
Section titled “Credits”Credit to @AayushBharti for the inspiration behind this component.
Original:
magicui.design/docs/components/interactive-hover-button