check thumbs-o-up twitter github desktop tablet folder-o wordpress

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.

<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.

<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.

<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.

<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.

<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.

<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.

<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

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