Button 4

PreviousNext

A button with animated icon that moves on hover

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/button/button-04.tsx
import { ArrowRightIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'

const ButtonIconHoverDemo = () => {
  return (
    <Button className='group'>
      Get In Touch
      <ArrowRightIcon className='transition-transform duration-200 group-hover:translate-x-0.5' />
    </Button>
  )
}

export default ButtonIconHoverDemo

Installation

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

Usage

import { Button04 } from "@/components/button-04"
<Button04 />