🚀 Featurastic UI Buttons

🎨 A modern, customizable, and feature-rich UI button library designed for stunning web interfaces. Perfect for developers who demand elegance, responsiveness, and simplicity.

✨ Features

• 💡 Customizable Styles: Tailor colors, sizes, shapes, and effects effortlessly.
• ⚡ Lightweight & Fast: Minimal footprint, optimized for performance.
• 📱 Responsive Design: Looks fantastic on all devices.
• 🔌 Seamless Integration: Works with React, Angular, Vue, and vanilla JavaScript.
• 🌈 Predefined Themes: Use built-in themes or create your own.
• ✨ Ripple Effects: Add interactive animations with one attribute.
• 🌟 Extendable: Add custom behaviors and styles easily.

🔗 Useful Links

🛠️ Getting Started

Basic Usage (HTML + JS)

Quickly add a stylish button to your webpage:

<!-- Button Element -->
<button class="fui-btn" data-variant="primary">Click Me</button>

<!-- Include the JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/nexoscreation/featurastic-ui-buttons@1/fui-buttons.js"></script>

Optionally, include the CSS for advanced styling:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/nexoscreation/featurastic-ui-buttons@1/fui-buttons.css"
/>

🌟 Built-in Themes & Variants

Featurastic UI Buttons come with built-in themes:

| Variant | Usage Class | Preview Color | Preview Button | | ------------- | -------------------------- | -------------------------------------------------------------------------------- | -------------- | | Primary | data-variant="primary" | hsl(180, 100%, 50%) | Comming Soon! | | Secondary | data-variant="secondary" | hsl(338, 99%, 50%) | Comming Soon! | | Success | data-variant="success" | hsl(111, 100%, 50%) | Comming Soon! | | Error | data-variant="error" | hsl(0, 100%, 50%) | Comming Soon! | | Netural | data-variant="netural" | hsl(0, 0%, 50%) | Comming Soon! |

🌈 Example Buttons

Explore the power of Featurastic UI Buttons:

<!-- Button Variants -->
<button class="fui-btn" data-variant="primary">Primary</button>
<button class="fui-btn" data-variant="secondary">Secondary</button>

<!-- Ripple Effect -->
<button class="fui-btn" data-variant="success" data-ripple="true">
  Success with Ripple
</button>

🎉 Coming Soon

• React.js, Vue.js, Nuxt.js Components
• Advanced animations and accessibility options.
• More themes and variants.
• Customizable Button size.

🤝 Contributing

We ❤️ contributions! Here's how you can help:

1. Fork this repository.
2. Create a new branch: git checkout -b feature-name.
3. Commit your changes: git commit -m "Add some feature".
4. Push to your branch: git push origin feature-name.
5. Open a pull request.

🛡️ License

This project is open-source and licensed under the CC0-1.0 License. See the LICENSE file for more details.