Hologram Button
A futuristic button with animated cyan glow, border pulse, and glassy effects. Perfect for sci-fi and modern UIs.
Demo
Interactive Demo
Hover to see the hologram glow and border pulse.
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Important: Create a lib folder at the root of your project (not inside app/). Add a types.ts file with the following interface for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the HologramButton component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (usually text or icon). |
onClick | () => void | undefined | Click handler for the button. |
className | string | "" | Additional CSS classes for the button. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Holographic glow and border pulse animation
- Cyan color scheme with glassy, futuristic look
- Framer Motion-powered hover and tap effects
- Customizable label and style
- TypeScript support (using BaseButtonProps from your types file)
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)