Button 18

PreviousNext

Link button with animated underline effect on hover

Docs
shadcn-studiocomponent

Preview

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

const ButtonAnimatedLinkDemo = () => {
  return (
    <Button
      variant='link'
      className='after:bg-primary relative !no-underline after:absolute after:bottom-2 after:h-px after:w-2/3 after:origin-bottom-right after:scale-x-0 after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100'
      asChild
    >
      <a href='#'>Contact Us</a>
    </Button>
  )
}

export default ButtonAnimatedLinkDemo

Installation

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

Usage

import { Button18 } from "@/components/button-18"
<Button18 />