Docs
Hover Button

Hover Button

A button that changes shape on Hover

Installation

Props

PropTypeDefaultDescription
childrenReact.ReactNodeThe content to display inside the button (typically text or an element).
onClick() => voidCallback function executed when the button is clicked.
classNamestring""Additional CSS classes to apply to the button.
defaultSizestring"h-12 w-12"Tailwind CSS classes for the button's default size.
hoverWidthstring"hover:w-32"Tailwind CSS classes for the button's width when hovered.
gradientFromstring"from-[#6a11cb]"Tailwind CSS class for the start color of the gradient background.
gradientTostring"to-[#2575fc]"Tailwind CSS class for the end color of the gradient background.
darkGradientFromstring"dark:from-[#070e41]"Tailwind CSS class for the start color of the gradient background in dark mode.
darkGradientTostring"dark:to-[#891421]"Tailwind CSS class for the end color of the gradient background in dark mode.
borderColorstring"border-[#656fe2]"Tailwind CSS class for the button's border color.
textColorstring"text-neutral-200"Tailwind CSS class for the button's text color.