Component Library

BeautifulButton Components

A collection of ready-to-use button components built with Tailwind CSS. Click on any button to copy its code and use it in your project.

Confetti Button

Celebration button with confetti effect

Required Package
npm install canvas-confetti
npm i --save-dev @types/canvas-confetti

Retro Button

Retro-style pixel art button with press effect

Primary

Primary call-to-action button with enhanced depth and interaction

Secondary

Secondary action button with subtle hover effects

Icon Primary

Primary button with animated icon

Gradient

Animated gradient background with hover effect

Outline

Outline style button with hover effect

Small

Compact button with gradient background

Glassmorphic

Modern glassmorphic effect button

Glow Effect

Button with glow and shine effect

Loading State

Loading state with spinner animation

Pill Button

Rounded pill-style button with gradient

3D Effect

Button with enhanced 3D press effect and lighting

Social Share

Social sharing button with icon

Success Button

Success action button with animated checkmark

Danger Button

Danger/Delete action button with animated icon

Download Button

Download button with animated icon and hover effect

Neon Button

Cyberpunk-style neon glowing button

Minimal Button

Clean minimal button with smooth underline animation

Pay Now Button

Payment button with animated credit card icon

More Buttons Coming Soon

We're working on adding more beautiful button designs. Stay tuned for updates!