Button 40

Button with ring hover effect that shows animated border on hover

shadcn-studiocomponent

Preview

Loading preview…

registry/new-york/components/button/button-40.tsx

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

const ButtonRingHoverDemo = () => {
  return (
    <Button className='ring-offset-background hover:ring-primary/90 transition-all duration-300 hover:ring-2 hover:ring-offset-2'>
      Ring Hover
    </Button>
  )
}

export default ButtonRingHoverDemo

Installation

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

Usage

import { Button40 } from "@/components/button-40"

<Button40 />