🎨 A modern, customizable, and feature-rich UI button library designed for stunning web interfaces. Perfect for developers who demand elegance, responsiveness, and simplicity.
- 💡 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.
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/npm/[email protected]/fui-buttons.js"></script>also, include the CSS for advanced styling:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/fui-buttons.css"
/>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! |
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>- React.js, Vue.js, Nuxt.js Components
- Advanced animations and accessibility options.
- More themes and variants.
- Customizable Button size.
We ❤️ contributions! Here's how you can help:
- Fork this repository.
- Create a new branch:
git checkout -b feature-name. - Commit your changes:
git commit -m "Add some feature". - Push to your branch:
git push origin feature-name. - Open a pull request.
This project is open-source and licensed under the CC0-1.0 License. See the LICENSE file for more details.