Installation
Get started with MN CSS by including the stylesheet in your HTML document. Once added, all MN CSS utility classes and components are ready to use.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sarbeswarpanda/mn-css@1.0.0/mn-button.css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdn.mncss.com/latest/mn.min.css">
<title>MN CSS</title>
</head>
<body>
<button class="mn-btn mn-btn-main">
Hello MN CSS
</button>
</body>
</html>Solid Buttons
Use solid buttons for primary actions. MN CSS provides 12 built-in color variants.
<button class="mn-btn mn-btn-main">Primary</button>
<button class="mn-btn mn-btn-alt">Secondary</button>
<button class="mn-btn mn-btn-success">Success</button>
<button class="mn-btn mn-btn-danger">Danger</button>
<button class="mn-btn mn-btn-warning">Warning</button>
<button class="mn-btn mn-btn-info">Info</button>
<button class="mn-btn mn-btn-dark">Dark</button>
<button class="mn-btn mn-btn-light">Light</button>
<button class="mn-btn mn-btn-purple">Purple</button>
<button class="mn-btn mn-btn-pink">Pink</button>
<button class="mn-btn mn-btn-orange">Orange</button>
<button class="mn-btn mn-btn-teal">Teal</button>Outline Buttons
Outline buttons feature a transparent background with a colored border. On hover, they fill with their corresponding color.
<button class="mn-btn mn-btn-outline-main">Primary</button>
<button class="mn-btn mn-btn-outline-alt">Secondary</button>
<button class="mn-btn mn-btn-outline-success">Success</button>
<button class="mn-btn mn-btn-outline-danger">Danger</button>
<button class="mn-btn mn-btn-outline-warning">Warning</button>
<button class="mn-btn mn-btn-outline-info">Info</button>
<button class="mn-btn mn-btn-outline-dark">Dark</button>
<button class="mn-btn mn-btn-outline-light">Light</button>Soft Buttons
Soft buttons use a subtle background tint with colored text, making them ideal for secondary actions and modern user interfaces.
<button class="mn-btn mn-btn-soft-main">Primary</button>
<button class="mn-btn mn-btn-soft-success">Success</button>
<button class="mn-btn mn-btn-soft-danger">Danger</button>
<button class="mn-btn mn-btn-soft-warning">Warning</button>
<button class="mn-btn mn-btn-soft-info">Info</button>
<button class="mn-btn mn-btn-soft-dark">Dark</button>Ghost Buttons
Ghost buttons have no background or border by default. They display a subtle hover effect, making them ideal for toolbars, navigation, and low-emphasis actions.
<button class="mn-btn mn-btn-ghost-main">Primary</button>
<button class="mn-btn mn-btn-ghost-dark">Dark</button>
<button class="mn-btn mn-btn-ghost-light">Light</button>Gradient Buttons
Gradient buttons combine multiple colors to create vibrant call-to-action elements. They are perfect for highlighting important actions and modern user interfaces.
<button class="mn-btn mn-btn-gradient">Default</button>
<button class="mn-btn mn-btn-gradient-blue">Blue</button>
<button class="mn-btn mn-btn-gradient-purple">Purple</button>
<button class="mn-btn mn-btn-gradient-red">Red</button>
<button class="mn-btn mn-btn-gradient-green">Green</button>Glass Buttons
Glass buttons use a glassmorphism effect with backdrop blur and semi-transparent backgrounds. They work best on colorful or blurred backgrounds.
<button class="mn-btn mn-btn-glass">
Glass
</button>
<button class="mn-btn mn-btn-glass-dark">
Dark Glass
</button>Link Buttons
Link buttons appear as hyperlinks while maintaining button behavior. They are ideal for low-emphasis actions, navigation, and inline controls.
<a href="#" class="mn-btn mn-btn-link">Primary Link</a>
<a href="#" class="mn-btn mn-btn-link-success">Success Link</a>
<a href="#" class="mn-btn mn-btn-link-danger">Danger Link</a>
<a href="#" class="mn-btn mn-btn-link-warning">Warning Link</a>
<a href="#" class="mn-btn mn-btn-link-info">Info Link</a>
<a href="#" class="mn-btn mn-btn-link-dark">Dark Link</a>
<a href="#" class="mn-btn mn-btn-link-light">Light Link</a>
<a href="#" class="mn-btn mn-btn-link-purple">Purple Link</a>
<a href="#" class="mn-btn mn-btn-link-pink">Pink Link</a>
<a href="#" class="mn-btn mn-btn-link-orange">Orange Link</a>
<a href="#" class="mn-btn mn-btn-link-teal">Teal Link</a>Rounded Buttons
Rounded button utilities allow you to quickly change the shape of any button, from pill-shaped buttons to circular icon buttons.
<button class="mn-btn mn-btn-main mn-btn-pill">
Pill
</button>
<button class="mn-btn mn-btn-main mn-btn-round">
Round
</button>
<button class="mn-btn mn-btn-main mn-btn-circle">
+
</button>
<button class="mn-btn mn-btn-success mn-btn-circle-sm">
✓
</button>
<button class="mn-btn mn-btn-danger mn-btn-circle-lg">
♥
</button>Shadow Buttons
Shadow utilities add depth and elevation to buttons. Choose from multiple shadow sizes or combine them with color variants for a modern UI.
<!-- Shadow Sizes -->
<button class="mn-btn mn-btn-main mn-btn-shadow">
Shadow
</button>
<button class="mn-btn mn-btn-main mn-btn-shadow-md">
Medium Shadow
</button>
<button class="mn-btn mn-btn-main mn-btn-shadow-lg">
Large Shadow
</button>
<button class="mn-btn mn-btn-main mn-btn-shadow-xl">
XL Shadow
</button>
<!-- Colored Shadows -->
<button class="mn-btn mn-btn-success mn-btn-shadow">
Success
</button>
<button class="mn-btn mn-btn-danger mn-btn-shadow">
Danger
</button>
<button class="mn-btn mn-btn-warning mn-btn-shadow">
Warning
</button>
<button class="mn-btn mn-btn-info mn-btn-shadow">
Info
</button>
<button class="mn-btn mn-btn-dark mn-btn-shadow">
Dark
</button>Glow Buttons
Glow buttons add a soft luminous shadow around the button, making them perfect for highlighting primary actions, featured content, and modern interfaces.
<button class="mn-btn mn-btn-main mn-btn-glow">
Glow
</button>
<button class="mn-btn mn-btn-success mn-btn-glow">
Success
</button>
<button class="mn-btn mn-btn-danger mn-btn-glow">
Danger
</button>
<button class="mn-btn mn-btn-warning mn-btn-glow">
Warning
</button>
<button class="mn-btn mn-btn-info mn-btn-glow">
Info
</button>
<button class="mn-btn mn-btn-dark mn-btn-glow">
Dark
</button>
<button class="mn-btn mn-btn-purple mn-btn-glow">
Purple
</button>Hover Effects
Hover effect utilities add interactive animations to buttons, improving user feedback and enhancing the overall user experience.
<button class="mn-btn mn-btn-main mn-btn-hover-scale">
Scale
</button>
<button class="mn-btn mn-btn-main mn-btn-hover-rise">
Rise
</button>
<button class="mn-btn mn-btn-main mn-btn-hover-slide">
Slide
</button>
<button class="mn-btn mn-btn-main mn-btn-hover-rotate">
Rotate
</button>
<button class="mn-btn mn-btn-main mn-btn-hover-skew">
Skew
</button>
<button class="mn-btn mn-btn-main mn-btn-hover-glow">
Glow
</button>Loading & Disabled Buttons
Loading buttons indicate that an action is currently in progress, while disabled buttons prevent user interaction until they become available.
<!-- Loading -->
<button class="mn-btn mn-btn-main mn-btn-loading">
Loading...
</button>
<button class="mn-btn mn-btn-success mn-btn-loading">
Saving...
</button>
<button class="mn-btn mn-btn-danger mn-btn-loading">
Deleting...
</button>
<!-- Disabled -->
<button class="mn-btn mn-btn-main" disabled>
Disabled
</button>
<button class="mn-btn mn-btn-success mn-btn-disabled">
Disabled
</button>Button Sizes
MN CSS provides multiple button size utilities to help you create compact, standard, or large buttons for different user interface requirements.
<button class="mn-btn mn-btn-main mn-btn-xs">
XS
</button>
<button class="mn-btn mn-btn-main mn-btn-sm">
SM
</button>
<button class="mn-btn mn-btn-main">
MD
</button>
<button class="mn-btn mn-btn-main mn-btn-lg">
LG
</button>
<button class="mn-btn mn-btn-main mn-btn-xl">
XL
</button>Block Buttons
Block button utilities make buttons span the full width of their container. Responsive variants allow buttons to become full-width only on specific screen sizes.
<!-- Always Full Width -->
<button class="mn-btn mn-btn-main mn-btn-block">
Full Width Button
</button>
<!-- Full Width on Mobile -->
<button class="mn-btn mn-btn-success mn-btn-block-sm">
Mobile Full Width
</button>
<!-- Full Width on Tablets -->
<button class="mn-btn mn-btn-danger mn-btn-block-md">
Tablet Full Width
</button>
<!-- Full Width on Large Screens and Below -->
<button class="mn-btn mn-btn-warning mn-btn-block-lg">
Large Screen Block
</button>Icon Buttons
MN CSS supports icon buttons with left or right aligned icons, icon-only buttons, different sizes, and circular icon buttons. Compatible with Font Awesome, Bootstrap Icons, Remix Icons, and other icon libraries.
<!-- Icon Left -->
<button class="mn-btn mn-btn-main mn-btn-icon-left">
<i class="fas fa-download"></i>
Download
</button>
<button class="mn-btn mn-btn-success mn-btn-icon-left">
<i class="fas fa-check"></i>
Save
</button>
<button class="mn-btn mn-btn-danger mn-btn-icon-left">
<i class="fas fa-trash"></i>
Delete
</button>
<!-- Icon Only -->
<button class="mn-btn mn-btn-main mn-btn-icon">
<i class="fas fa-plus"></i>
</button>
<button class="mn-btn mn-btn-danger mn-btn-icon">
<i class="fas fa-heart"></i>
</button>
<!-- Icon Right -->
<button class="mn-btn mn-btn-info mn-btn-icon-right">
Next
<i class="fas fa-arrow-right"></i>
</button>
<!-- Small Icon -->
<button class="mn-btn mn-btn-success mn-btn-icon mn-btn-icon-sm">
<i class="fas fa-check"></i>
</button>
<!-- Large Circle Icon -->
<button class="mn-btn mn-btn-warning mn-btn-icon mn-btn-icon-lg mn-btn-icon-circle">
<i class="fas fa-star"></i>
</button>Split Buttons
Split buttons combine a primary action with a dropdown indicator. They are commonly used for actions that offer multiple related options, such as Save, Export, or Download.
<button class="mn-btn mn-btn-main">
Save ▼
</button>
<button class="mn-btn mn-btn-success">
Download ▼
</button>
<button class="mn-btn mn-btn-danger">
Delete ▼
</button>
<button class="mn-btn mn-btn-warning">
Export ▼
</button>Animated Buttons
Animated button utilities add engaging visual effects to improve user interaction. MN CSS includes ripple, bounce, and pulse animations that can be applied to any button variant.
<!-- Ripple -->
<button class="mn-btn mn-btn-main mn-btn-ripple">
Ripple
</button>
<!-- Bounce -->
<button class="mn-btn mn-btn-success mn-btn-bounce">
Bounce
</button>
<!-- Pulse -->
<button class="mn-btn mn-btn-danger mn-btn-pulse">
Pulse
</button>Floating Action Buttons (FAB)
Floating Action Buttons (FABs) are circular buttons used to highlight the primary action on a page. They support multiple sizes, colors, and positioning utilities.
<button class="mn-btn mn-btn-main mn-btn-fab">
+
</button>
<button class="mn-btn mn-btn-success mn-btn-fab">
✓
</button>
<button class="mn-btn mn-btn-danger mn-btn-fab">
×
</button>
<button class="mn-btn mn-btn-info mn-btn-fab mn-btn-fab-sm">
+
</button>
<button class="mn-btn mn-btn-warning mn-btn-fab mn-btn-fab-lg">
★
</button>