shadcn index

Button 11

PreviousNext

A Primary Button with gradient background effect for primary action

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/button/button-11.tsx
import { Button } from '@/registry/new-york/ui/button'

const ButtonGradientDemo = () => {
  return (
    <Button className='from-primary via-primary/60 to-primary bg-transparent bg-gradient-to-r [background-size:200%_auto] hover:bg-transparent hover:bg-[99%_center]'>
      Get Started
    </Button>
  )
}

export default ButtonGradientDemo

Installation

npx shadcn@latest add @shadcn-studio/button-11

Usage

import { Button11 } from "@/components/button-11"
<Button11 />