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.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/interactive-hover-button.json"

Install Manually

Copy and paste the following code

InteractiveHoverButton.vue

API

Prop NameTypeDefaultDescription
textstringButtonThe text to be displayed inside the button.
classstring""Additional class names to style the component.

Credits

Gradient Button
A stylish animated button with a rotating conic gradient border and customizable properties for a vibrant look.
Rainbow Button
A rainbow effect on button.