🎨 MN CSS

A lightweight, modern CSS framework with beautiful buttons and UI components.

MN CSS helps developers build clean, responsive, and modern interfaces with minimal effort. It includes a rich collection of customizable button styles and interactive effects.

✨ Features

• 🚀 Lightweight and fast
• 📱 Fully responsive
• 🎨 12 solid button colors
• ⭕ Outline buttons
• ☁️ Soft buttons
• 👻 Ghost buttons
• 🌈 Gradient buttons
• 🪟 Glass buttons
• 🔗 Link buttons
• 💡 Glow effects
• 🌑 Shadow effects
• ✨ Hover animations
• ⏳ Loading states
• 🚫 Disabled states
• 📏 Multiple sizes
• ⭐ Icon buttons
• ⚡ Animated buttons
• ➕ Floating Action Buttons (FAB)

📦 Installation

CDN

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@sarbeswarpanda/[email protected]/mn-button.css">

NPM

npm install @sarbeswarpanda/mn-css

Import into your project:

@import "mn-css/mn-button.css";

or

import "mn-css/mn-button.css";

🚀 Quick Start

<button class="mn-btn mn-btn-main">
    Primary Button
</button>

🎨 Button Variants

Solid

<button class="mn-btn mn-btn-main">Primary</button>
<button class="mn-btn mn-btn-success">Success</button>
<button class="mn-btn mn-btn-danger">Danger</button>

Outline

<button class="mn-btn mn-btn-outline-main">
    Primary
</button>

Gradient

<button class="mn-btn mn-btn-gradient">
    Gradient
</button>

Glass

<button class="mn-btn mn-btn-glass">
    Glass
</button>

Shadow

<button class="mn-btn mn-btn-main mn-btn-shadow">
    Shadow
</button>

Glow

<button class="mn-btn mn-btn-main mn-btn-glow">
    Glow
</button>

Hover Effects

<button class="mn-btn mn-btn-main mn-btn-hover-scale">
    Scale
</button>

Loading

<button class="mn-btn mn-btn-main mn-btn-loading">
    Loading...
</button>

Sizes

<button class="mn-btn mn-btn-main mn-btn-xs">XS</button>

<button class="mn-btn mn-btn-main">MD</button>

<button class="mn-btn mn-btn-main mn-btn-xl">XL</button>

Icon Buttons

<button class="mn-btn mn-btn-main mn-btn-icon-left">
    <i class="fas fa-download"></i>
    Download
</button>

Floating Action Button

<button class="mn-btn mn-btn-main mn-btn-fab">
    +
</button>

🌐 Browser Support

| Browser | Support | |----------|:------:| | Chrome | ✅ | | Firefox | ✅ | | Edge | ✅ | | Safari | ✅ | | Opera | ✅ |

📖 Documentation

Documentation

https://sarbeswarpanda04.github.io/Mn-css/docs.html

Examples

https://sarbeswarpanda04.github.io/Mn-css/examples.html

📂 Project Structure

mn-css/

├── mn-button.css

├── README.md

├── LICENSE

├── package.json

├── docs.html

├── examples.html

└── assets/

🤝 Contributing

Contributions are welcome.

1. Fork the repository.

2. Create a feature branch.

3. Commit your changes.

4. Open a Pull Request.

📜 License

Released under the MIT License.

👨‍💻 Author

Sarbeswar Panda

Website

https://sarbeswarpanda04.github.io/Mn-css/

GitHub

https://github.com/SarbeswarPanda04/Mn-css

⭐ Support

If you like MN CSS, please consider giving the project a ⭐ on GitHub.

Happy Coding! 🚀