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>

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>

To create a metro-styled text box, just add class="m-wrap" to any <input>, <select>, or <textarea> html element. Viola! You now have a basic modern-styled element.

Textboxes and Textareas

<textarea class="m-wrap" placeholder="Styled"></textarea>
<input type="text" class="m-wrap" placeholder="Styled" />

Checkboxes/Radio Buttons

<label class="m-checkbox m-wrap">
    <input type="checkbox" class="m-wrap" value="">
    First Choice
</label>
<label class="m-radio m-wrap">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    First Option	
</label>
<label class="m-radio m-wrap">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios2" value="option2">
    Second Option
</label>

Inline Radio Buttons/Checkboxes

Add the .inline class to the labels of a checkbox or radio group for them to line up in a single line.

<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios1" value="option1">
    First Choice
</label>
<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios2" value="option2" checked>
    Second Choice	
</label>
<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios3" value="option3">
    Third Choice
</label>

Dropdown Lists/List Views

<select class="m-wrap">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>
<br/>
<select multiple="multiple" class="m-wrap">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Filepicker

<input type="file" class="m-wrap">

Disabled Elements

To depict disabled elements, it needs to look like it's unusable. Add the disabled attribute in the element to make it look like its disabled. Place the readonly to make it uneditable. Lastly, use the m-uneditable-input with a span element if you prefer declaring the readonly style inside the class attribute of an element.

<textarea class="m-wrap" placeholder="Disabled" disabled></textarea>
<input type="text" class="m-wrap" disabled placeholder="Disabled"/>        
<br/>
<textarea class="m-wrap" placeholder="" readonly>Readonly</textarea>
<input type="text" class="m-wrap" readonly placeholder="" value="Readonly"/>         
<br/>                               
<span class="m-wrap m-uneditable-input">Uneditable

Appended Controls

You can also place text or buttons attached before or after any element. To place stuff before an element, wrap them around a span container with the add-on class. To set them before an element, wrap both the control and the add-on container with a m-input-prepend class, to set the text after a element you can use m-input-append. Do note that when using m-input-prepend you need to put the add-on container before the element, with m-input-append you need to put it after the control.

Note: the textarea, select, input type="file", input type="checkbox", and input type="radio" elements are not supported.

<div class="m-input-prepend">
  <span class="add-on">@</span>
  <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
</div>                    
<br/>
<div class="m-input-append">                      
  <input class="m-wrap" size="16" type="text" placeholder="">
  <span class="add-on"><i class="icon-font"></i></span>
</div>

You can combine both the m-input-prepend class and the m-input-append class to place stuff before and after an element.

<div class="m-input-prepend m-input-append">
  <span class="add-on">@</span>
  <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
  <span class="add-on">Username
</div>

You can also place buttons instead of text.

<div class="m-input-append">                      
    <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
    <button href="#" class="m-btn">Search</button>
    <button href="#" class="m-btn">Back</button>
</div>   
<br/>
<div class="m-input-prepend">                
    <button href="#" class="m-btn blue">Login</button>      
    <input class="m-wrap" size="16" type="password" placeholder="Your Password">
</div>                      

Control sizes

Use the m-ctrl-small, m-ctrl-medium, and m-ctrl-large to control the length of your textbox, textarea and select elements. There's the m-ctrl-huge class to create jumbo textboxes (textboxes with this size does not support the append and prepend classes). However, do note that this class is only supported with the input type="text" element.

<input type="text" class="m-wrap m-ctrl-small" placeholder=".m-ctrl-small"/> 
<br/>     
<input type="text" class="m-wrap m-ctrl-medium" placeholder=".m-ctrl-medium"/>         
<br/>
<input type="text" class="m-wrap m-ctrl-large" placeholder=".m-ctrl-large"/>     
<br/>   
<input type="text" class="m-wrap m-ctrl-huge" placeholder=".m-ctrl-huge"/>