Buttons

Overview

A beautiful collection of animated button components with unique effects and interactions. Each button is built with modern CSS and animations, perfect for making your UI stand out.

Variants

Shimmer Button

A sleek button with an elegant shimmer effect that sweeps across on hover.

Neon Glow Button

A vibrant button with pulsating neon glow effect.

All Button Variants

Here's a complete showcase of all button components with their code:

Installation

Base Dependencies

npm install lucide-react clsx tailwind-merge

For Gradient Border and Moving Border Buttons

npm install framer-motion

Usage Example

import BtnShimmer from '@/components/aesthe-ui/button/btn-shimmer'

export default function MyComponent() {
  return (
    <BtnShimmer onClick={() => console.log('Clicked!')}>
      Get Started
    </BtnShimmer>
  )
}

All buttons accept standard button props including onClick, disabled, type, etc.

Customization

Each button can be customized using the className prop:

<BtnNeonGlow className="w-full md:w-auto">
  Custom Text
</BtnNeonGlow>

You can also modify the colors, gradients, and animations directly in the component code to match your brand.