shadcn index

heartbeat-effect-button

PreviousNext

A Button component with heartbeat effect animation on hover.

Docs
tailwind-admincomponent

Preview

Loading preview…
app/components/animatedComponents/buttons/heartbeat-effect/HeartbeatEffectButton.tsx
import { Button } from '@/components/ui/button'
import "./heartbeat.css"

const HeartbeatEffectButton = () => {
  return (
    <Button variant='destructive' className='heartbeateffect dark:bg-destructive/100'>
      Heartbeat Effect
    </Button>
  )
}

export { HeartbeatEffectButton }

Installation

npx shadcn@latest add @tailwind-admin/heartbeat-effect-button

Usage

import { HeartbeatEffectButton } from "@/components/heartbeat-effect-button"
<HeartbeatEffectButton />