M-Buttons – Modular Sass/CSS button library.

M-Buttons is a CSS3 SASS button library designed around modular classes and ease-of-use. The goal is to create an extremely modular button library with easy to use classes and a very configurable sass source. This post will show some examples.

Source + Install

Github – Source

Default Usage

To use M-Buttons it’s as simple as applying m-button to an anchor tag.

Default Usage

Modular Classes

M-Buttons is designed around the idea of modular classes. After applying the base m-button class you can append any of the following classes to modify the button appearance.

CLASS DESCRIPTION
m-wide Increases the horizontal length of the button
m-round Increases the border-radius of the button
m-large Increases the overall size of the button
 m-positive Sets the color of the button to be a positive color
 m-negative  Sets the color of the button to be a negative color
 m-inline Decreases the size to be used in inline cases
 m-center Centers the button using margin: 0 auto
 m-inverse Inverse the colors used (does not work on m-positive or m-negative)
 m-white Override the current colors to be white
 m-black Override the current colors to be black

Examples

Using the different classes available you can create a wide variety of buttons with extreme ease and flexibility.

m-button m-wide m-large

m-button m-round

m-button m-positive

m-button m-negative m-round

m-button m-inline