Gradient Slide Button

PreviousNext

A dynamic and stylish button that reveals a vibrant gradient as you hover over it.

Installation

pnpm dlx shadcn@latest add "https://ui.datthu.site/r/gradient-slide-button.json"

Usage

import { GradientSlideButton } from "@/components/datthuui/gradient-slide-button"
<GradientSlideButton className="rounded-3xl">Hover me</GradientSlideButton>

Props

PropTypeDefaultDescription
childrenReact.ReactNodeThe content to display inside the button
classNamestring""Additional CSS classes to apply to the element
colorFromstring"#F54900"The starting color of the gradient
colorTostring"#FF8904"The ending color of the gradient