Building the ultimate collection of button components for modern web development

Website · NPM Organization · Packages · Issues · Discussions

We're on a mission to provide developers and designers with 200+ beautifully crafted, production-ready button components that are:

• Easy to use - Copy-paste ready components for React and Vanilla JavaScript
• Highly customizable - Full control over styles, animations, and effects
• Performance optimized - Lightweight, fast-loading, and efficient
• Well documented - Comprehensive guides and interactive examples
• Open source - MIT licensed and community-driven

React components with full TypeScript support, hooks-based, and tree-shakeable.

npm install @coolbuttons/react

import { Claymorphic, GlassCard, NeonBorder } from '@coolbuttons/react';

export default function App() {
  return <Claymorphic>Click me</Claymorphic>;
}

Vanilla JavaScript implementation with zero dependencies, perfect for non-React projects.

npm install @coolbuttons/vanilla

import { createButton } from '@coolbuttons/vanilla';

createButton('claymorphic', {
  text: 'Click Me!',
  onClick: () => console.log('Clicked!')
}).mount('#app');

Universal package supporting multiple frameworks and use cases.

Our collection includes 200+ unique button styles organized by design language:

• Glassmorphic & Glass Effects - Frosted glass, transparency, light effects
• Neumorphic - Soft, embossed, 3D depth effects
• Cyberpunk & Neon - Bold, glowing, futuristic aesthetics
• Minimal & Modern - Clean, simple, contemporary designs
• Retro & Vintage - Classic 90s, terminal, industrial looks
• Advanced Effects - Liquid, morph, gradient, particle effects
• Interactive - Magnetic, bouncy, floating, responsive interactions

Browse all styles at coolbuttons.dev

✨ 200+ Button Styles - Carefully designed and tested
⚛️ Multi-Framework - React, Vanilla JS, and more
🎨 Highly Customizable - CSS, inline styles, and theme variables
🌙 Dark Mode Support - Automatic light/dark mode detection
📱 Fully Responsive - Works on mobile, tablet, desktop
🔌 CDN Ready - Load directly from jsDelivr without npm
📡 Offline Support - Service Worker integration
🚫 Error Pages - Professional 404 and offline pages
♿ Accessible - WCAG compliant with keyboard navigation
📦 Zero Dependencies - Lightweight and standalone

# Clone the repository
git clone https://github.com/coolbuttons/coolbuttons.git
cd coolbuttons

# Install dependencies
npm install

# Start development server
npm run dev

# Build all packages
npm run build

coolbuttons/
├── packages/
│   ├── react/          # React components
│   ├── vanilla/        # Vanilla JavaScript
│   └── coolbuttons/    # Universal package
├── components/         # Demo components
├── data/              # Button library data
├── public/            # Static assets
└── utils/             # Utility functions

We love contributions! Please see CONTRIBUTING.md for guidelines.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingButton)
3. Commit your changes (git commit -m 'Add AmazingButton')
4. Push to the branch (git push origin feature/AmazingButton)
5. Open a Pull Request

• 200+ button styles
• 3 official packages
• 100% TypeScript support
• MIT licensed
• Community driven

We're always looking for:

• Button Designers - Help us create new button styles
• Developers - Contribute code and improvements
• Documentation Writers - Improve guides and examples
• Designers - Help with UI/UX improvements
• Community Members - Share feedback and ideas

Join our community:

• 💬 GitHub Discussions
• 🐛 Report Issues
• 📧 Email Us

• 🌐 Official Website
• 📖 Documentation
• 📦 NPM Organization
• 🔗 GitHub

All packages are licensed under the MIT License.

Cool Buttons is built with ❤️ by the community. Special thanks to:

• All our contributors and supporters
• The amazing React and JavaScript communities
• Inspired by beautiful design systems worldwide

If you love Cool Buttons, please consider:

• ⭐ Star the repository on GitHub
• 🎁 Share with friends and colleagues
• 💰 Support development - Buy Me a Coffee
• 📣 Spread the word on social media

Made with ❤️ by the Cool Buttons Organization
Visit Website · View GitHub