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.

Open in

import { InteractiveHoverButton } from "@/registry/magicui/interactive-hover-button"

export function InteractiveHoverButtonDemo() {
  return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>
}

Installation


pnpm dlx shadcn@latest add @magicui/interactive-hover-button

Usage

import { InteractiveHoverButton } from "@/components/ui/interactive-hover-button"

<InteractiveHoverButton>Interactive Hover Button</InteractiveHoverButton>

Props

Prop	Type	Default	Description
`text`	`string`	`Button`	The text to be displayed inside the button
`className`	`string`	`-`	Additional class names to style the component

Credits

Credit to @AayushBharti

Interactive Grid Pattern iPhone

On This Page

Installation Usage Props Credits

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers