Buttons

To create a modern-styled button, just add class="m-btn" to any <a>, <button>, or <input> html element. Viola! You now have a basic modern-styled button.

<form>
    <a href="#" class="m-btn">Post comment</a>
    <input class="m-btn" type="submit" value="New Comment (submit)" />
    <button class="m-btn">New Comment (button)</button>
</form>

Colored Buttons

To get some color to your buttons, you can do this by adding the blue, red, purple, black or green class to your button.

<a href="#" class="m-btn red">Color Red</a>

Rounded Buttons

Add the rnd class to create rounded-buttons. Like those buttons Microsoft uses on the Microsoft Surface website.

<a href="#" class="m-btn red rnd">Color Red</a>

Striped buttons

If you prefer the buttons having "color highlights" instead of filling it up with one color, you can use the {color}-stripe class. You'll get some stripes on the buttons like those being used at Microsoft's Windows Azure website. Just use any of the blue, red, purple or green color classes above and put -stripe next to it. Examples can be seen below.

<a href="#" class="m-btn red-stripe">Red Stripe</a>
<a href="#" class="m-btn purple-stripe">Purple stripe</a>

Disabled Buttons

To depict a disabled button, it needs to look like it's unusable. Add the disabled class for displaying a disabled button. Special note: This style automatically appears when you use the disabled attribute in the element, no need to class it within the class attribute. Same goes for the active classes.

<a href="#" class="m-btn disabled">Preview</a>
<a href="#" class="m-btn" disabled>Preview</a>
<a href="#" class="m-btn red disabled">Delete</a>
<a href="#" class="m-btn red" disabled>Delete</a>

Button sizes

You can also get the buttons in different sizes. Use the sm class to shrink the text in buttons. To shrink the button itself along with the size of the text, use the mini class. Lastly, there's the big class for those tile-like buttons.

<a href="#" class="m-btn mini">Mini size</a>
<a href="#" class="m-btn sm">Default size</a>
<a href="#" class="m-btn big">Large size</a>

You can also mix and match the color classes and the size classes. Here are some examples:

Button groups

To group together a handful of buttons, just wrap them in an element that has the m-btn-group class.

<div class="m-btn-group">
    <a href="#" class="m-btn">Left</a>
    <a href="#" class="m-btn">Center</a>
    <a href="#" class="m-btn">Right</a>
</div>

Button strips

Creating a sequence of button groups resembling a loosely coupled toolbar can be achieved with the class m-btn-strip. It wraps all the button groups in a horizontal manner to resemble a strip of buttons.

<div class="m-btn-strip">
    <a href="#" class="m-btn">Compose New</a>
    
    <div class="m-btn-group">
        <a href="#" class="m-btn">Archive</a>
        <a href="#" class="m-btn">Spam</a>
        <a href="#" class="m-btn">Delete</a>
    </div>
                        
    <div class="m-btn-group">
        <a href="#" class="m-btn">Move to</a>
        <a href="#" class="m-btn">Labels</a>
    </div>

    <a href="#" class="m-btn">More</a>
</div>

Icon classes

The icons that you can use for the buttons are also taken from the glyphicons image sprite used by Twitter Bootstrap. Twitter Bootstrap has a great array of documents for the complete list of icons in the glyphicon sprite, their respective CSS class names and how to use those icon classes.

I've also provided those "Swap Arrows" in one sprite. These are the arrows extensively being used by Microsoft. Thanks to Syncfusion and their awesome Metro Studio.

Note: if the icons does not seem to appear, double check the filepath in the css files. The default folder path for the icons is ../img/

You can also use the white counter-parts of the icons above by adding the m-icon-white class.

Icon buttons

To create a button using an icon, add the icn-only class. Then use the icon class inside the button, just as shown below.

<a href="#" class="m-btn icn-only"><i class="icon-share"></i></a>
<a href="#" class="m-btn red icn-only"><i class="icon-remove icon-white"></i></a>
<a href="#" class="m-btn blue icn-only"><i class="m-icon-swapright m-icon-white"></i></a>

Grouping them together to achieve the same buttons for Gmail's paginator is quite easy.

<div class="m-btn-group">
    <a href="#" class="m-btn icn-only"><i class="icon-chevron-left"></i></a>
    <a href="#" class="m-btn icn-only"><i class="icon-chevron-right"></i></a>
<div>

To create large icon buttons using the big swap arrows that was provided, just use the bigicn-only CSS class.

<a href="#" class="m-btn bigicn-only"><i class="m-icon-big-swapright"></i></a>
<a href="#" class="m-btn bigicn-only green"><i class="m-icon-big-swapright icon-white"></i></a>

Buttons with both text and icon

So far we know how to create a button with text in it. We also have tackled how to create a button with only an icon in it. This time let's get a bunch of buttons with both text and icon in it.

<a href="#" class="m-btn mini red"><i class="icon-trash"></i> Delete Item</a>
<a href="#" class="m-btn"><i class="icon-plus"></i> Add Item</a>
<a class="m-btn purple-stripe">Listen to podcast <i class="icon-headphones"></i></a>
<a href="#" class="m-btn blue"><i class="icon-plus"></i> Submit Entry</a>
<a class="m-btn purple big">See pricing options <i class="m-icon-big-swapright m-icon-white"></i></a>

Radio Button Groups

Sometimes your button group should act like a series of radio buttons, in which selecting one button deselects the others. Add the toggle-buttons class to your m-btn-group div to accomplish this. To set the currently selected button, use the active class. Drop in the <script src="{file path to m-radio.js}"></script> script near the closing body tag.

Note: You have to include jQuery for this to work. Tested with jQuery v1.8.0 and above.

<div class="m-btn-group toggle-buttons">
    <a href="#" class="m-btn">Tools</a>
    <a href="#" class="m-btn">Settings</a>
    <a href="#" class="m-btn active">About</a>
    <a href="#" class="m-btn">Help</a>
    <a href="#" class="m-btn">Contact</a>
</div>

Button dropdowns

To create buttons that spawn dropdown menus we'll use the m-dropdown.min.js file to make it happen. Drop in the <script src="{file path to m-dropdown.min.js}"></script> script near the closing body tag. If you're using it with Twitter Bootstrap, just their bootstrap.min.js or bootstrap-dropdown.js to make it happen.

Note: You have to include jQuery for this to work. Tested with jQuery v1.8.0 and above.

Create the dropdown menu by making a ul list with a m-dropdown-menu class in it. Afterwards, wrap the ul list with your button in a m-btn-group element. Place a dropdown-toggle class with the button and put in the data-toggle attribute as shown by the example below. Lastly, to get that dropdown arrow shown in the example, just place a caret class in a span element.

<div class="m-btn-group">
  <a class="m-btn dropdown-toggle" data-toggle="dropdown" href="#">
    Tools <span class="caret"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Preferences</a></li>
      <li><a href="#">Window Options</a></li>
      <li><a href="#">Help</a></li>
  </ul>
</div>

To create buttons with the dropdown toggle seperated from the text, place the caret in another button with a dropdown-carettoggle class in that button. To make the dropdown arrow into white, just place the white class with the span containing the caret.

<div class="m-btn-group">
  <a class="m-btn blue"><i class="icon-cog icon-white"></i> Settings</a>
  <a class="m-btn blue dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li class="divider"></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>
<div class="m-btn-group">
  <a class="m-btn blue rnd"><i class="icon-cog icon-white"></i> Rounded Settings</a>
  <a class="m-btn blue rnd dropdown-carrettoggle" data-toggle="dropdown" href="#">
    <span class="caret white"></span>
  </a>
  <ul class="m-dropdown-menu">
      <li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
      <li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
      <li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
      <li class="divider"></li>
      <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div>