Website · Packages · Guide · GitHub

Cool Buttons

Cool Buttons is an open-source button component library that provides 200+ beautifully crafted, production-ready button styles for React and Vanilla JavaScript. The library aims to make it easier for designers and developers to incorporate stunning buttons into their projects by providing several official packages with full TypeScript support.

Packages

Logo	Package	Version	Downloads	Links
	@coolbuttons/react			Docs · Source
	@coolbuttons/vanilla			Docs · CDN
	coolbuttons			Docs · Source

Installation

React

npm install @coolbuttons/react

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

export default function App() {
  return (
    <div className="flex gap-4">
      <Claymorphic>Click me</Claymorphic>
      <GlassCard>Glass Card</GlassCard>
      <NeonBorder>Neon Border</NeonBorder>
    </div>
  );
}

Vanilla JavaScript

npm install @coolbuttons/vanilla

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

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

CDN

<script src="https://cdn.jsdelivr.net/npm/@coolbuttons/vanilla@1.0.4/dist/coolbuttons.min.js"></script>
<script>
  new CoolButton('Click me!', {
    onClick: () => console.log('Clicked!')
  }).mount('#app');
</script>

Features

• 200+ beautifully crafted button styles
• Full TypeScript support
• Works with React and Vanilla JavaScript
• Zero dependencies
• Dark mode support
• CDN ready
• Offline support with Service Worker
• Professional error pages included

Contributing

For more info on how to contribute please see the contribution guidelines.

License

Cool Buttons is totally free for commercial use and personal use, this software is licensed under the MIT License.

Community

Have questions or want to share your Cool Buttons creations?

• 🌐 Website
• 🐙 GitHub
• 📧 Email

---

Made with ❤️ by Dev Chauhan