shine-effect-button

PreviousNext

A Button component with shine effect animation on hover.

Docs
tailwind-admincomponent

Preview

Loading preview…
app/components/animatedComponents/buttons/shine-effect/ShineEffectButton.tsx
import { Button } from '@/components/ui/button'

const ShineEffectButton = () => {
  return (
    <Button className='relative overflow-hidden before:absolute before:inset-0 before:rounded-[inherit] before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.7)_50%,transparent_75%,transparent_100%)] before:bg-[length:250%_250%,100%_100%] before:bg-[position:200%_0,0_0] before:bg-no-repeat before:transition-[background-position_0s_ease] before:duration-1000 hover:before:bg-[position:-100%_0,0_0] dark:before:bg-[linear-gradient(45deg,transparent_25%,rgba(120,160,255,0.25)_50%,transparent_75%,transparent_100%)]'>
      Shine Hover
    </Button>
  )
}

export default ShineEffectButton

Installation

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

Usage

import { ShineEffectButton } from "@/components/shine-effect-button"
<ShineEffectButton />