Buttons

MM.css includes multiple button styles of different shapes, sizes and colors.

Button Styles

Links and buttons can be styled using the button, button-primary, button-green, button-yellow etc. classes as shown below. The default button style is same as dark button style and primary button style is same as blue button.

Blue Button Green Button Red Button Pink Button Purple Button Yellow Button

Light Button Gray Lighter Gray Light Gray Dark Gray Darker Dark Button

Default Primary White Black

<a class="button" href="#">Default Button</a>
<a class="button button-primary" href="#">Primary Button</a>
<a class="button button-light" href="#">Light Button</a>
<a class="button button-gray-light" href="#">Gray Light</a>
<a class="button button-gray" href="#">Gray button</a>
<a class="button button-gray-dark" href="#">Gray Dark</a>
<a class="button button-dark" href="#">Dark Button</a>

<a class="button button-blue" href="#">Blue Button</a>
<a class="button button-green" href="#">Green Button</a>
<a class="button button-yellow" href="#">Yellow Button</a>
<a class="button button-red" href="#">Red Button</a>
<a class="button button-pink" href="#">Pink Button</a>
<a class="button button-purple" href="#">Purple Button</a>

Outline Buttons

To make any button outline button, add bg-transparent and an appropriate text color using text-* classes as shown below.

Default Button Primary Button Light Button Gray Light Gray button Gray Dark Dark Button

Blue Button Green Button Yellow Button Red Button Pink Button Purple Button Teal Button Cyan Button

<a class="button bg-transparent text-dark" href="#">Default Button</a>
<a class="button button-primary bg-transparent text-primary" href="#">Primary Button</a>
<a class="button button-blue bg-transparent text-blue" href="#">Blue Button</a>
...

Rounded Buttons

Add border-rounded class to make any button a rounded button.

Default Button Primary Button Light Button Gray Light Gray button Gray Dark Dark Button

Blue Button Green Button Yellow Button Red Button Pink Button Purple Button Teal Button Cyan Button

<a class="button border-rounded" href="#">Default Button</a>
<a class="button button-primary border-rounded" href="#">Primary Button</a>
<a class="button button-blue border-rounded" href="#">Blue Button</a>
...

Similarly, outline buttons can be made rounded too by adding the border-rounded class.

Default Button Primary Button Light Button Gray Light Gray button Gray Dark Dark Button

Blue Button Green Button Yellow Button Red Button Pink Button Purple Button Teal Button Cyan Button

<a class="button border-rounded bg-transparent text-dark" href="#">Default Button</a>
<a class="button button-primary border-rounded bg-transparent text-primary" href="#">Primary Button</a>
<a class="button button-blue border-rounded bg-transparent text-blue" href="#">Blue Button</a>
...

Disabled Buttons

Buttons can be disabled by adding the disabled attribute.

Disabled Button Disabled Button Disabled Button

<a class="button" href="#" disabled>Disabled Button</a>
<a class="button button-primary" href="#" disabled>Disabled Button</a>
<a class="button button-primary bg-transparent text-dark" href="#" disabled>Disabled Button</a>

Button Sizes

To change the button size, simply add the text size modifiers text-small and text-large as shown below.

Small Button Normal Button Large Button

<a class="button button-primary text-small" href="#">Small Button</a>
<a class="button button-primary" href="#">Normal Button</a>
<a class="button button-primary text-large" href="#">Large Button</a>

Block Button

Use d-block display utility class to create a block button style.

Block Button

<a class="button button-primary d-block" href="#">Block Button</a>
<div class="grid gutters">
 <div class="col"><a class="button d-block" href="#">Block Button</a></div>
 <div class="col"><a class="button d-block" href="#">Block Button</a></div>
</div>

Buttons with Icons

Twitter GitHub

Want to contribute to the documentation? Edit this page on Github.