Featurastic UI Buttons
Discover easy-to-use, beautiful buttons for your website. Perfect for all web developers!
Published: January 02, 2025Updated: - January 03, 2025
🎨 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.
🛠️ 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/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"
/>
🌟 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>
🤝 Contributing
We ❤️ contributions! Here's how you can help:
- 🍴 Fork the repository
- 🌿 Create your feature branch (
git checkout -b feature/AmazingFeature) - 💾 Commit your changes (
git commit -m 'Add some AmazingFeature') - 🚀 Push to the branch (
git push origin feature/AmazingFeature) - 🔃 Open a Pull Request
📄 License
This project is open-source and licensed under the CC0-1.0 License.
Made with ❤️ by the Nexos Creation Team