Buttonsdefinition

With the Metro UI CSS you can easily create different types of buttons, stylized to Windows 8. Button styles can be applied to anything with the .button class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Push button

<button>Button</button>
<a class="button">Button</a>

To change size of button you can use build-in classes: large, small and mini. 

<button>Button</button>
<button class="large">Button</button>
<button class="small">Button</button>
<button class="mini">Button</button>
<a class="button small">Button</a>

For additional styling button you can use predefined button subclasses: .default, .primary, .info, .success, .warning, .danger, .inverse and .link or build-in color classes for background and foreground. 

<button class="primary">Button</button>
<button class="bg-darkRed fg-white">Button</button>

Also you can add icon to button with tag <i> and class icon-*. 

<button><i class="icon-rocket on-left"></i>Button</button>
<button>Button<i class="icon-rocket on-right"></i></button>

Command button

A command button is the extension of a push button. 

<button class="command-button">
    <i class="icon-share-2 on-left"></i>
    Yes, share and connect
    <small>Use this option for home or work</small>
</button>

<button class="command-button">
    <i class="icon-share-3 on-right"></i>
    Yes, share and connect
    <small>Use this option for home or work</small>
</button>

For additional styling button you can use predefined button subclasses: .default, .primary, .info, .success, .warning, .danger, .inverse and .link or build-in color classes for background and foreground. 

<button class="command-button primary">
    <i class="icon-share-2 on-left"></i>
    Yes, share and connect
    <small>Use this option for home or work</small>
</button>

<button class="command-button inverse">
    <i class="icon-share-3 on-right"></i>
    Yes, share and connect
    <small>Use this option for home or work</small>
</button>

Toolbar

Default toolbar

<div class="toolbar">
    <button>...</button>
    <button>...</button>
    <button>...</button>
</div>

<div class="toolbar no-spaces">
    <button>...</button>
    <button>...</button>
    <button>...</button>
</div>

Transparent toolbar

<div class="toolbar transparent">
    <button><i class="icon-folder-2 on-left"></i>Open</button>
    <button><i class="icon-floppy on-left"></i>Save</button>
    <button><i class="icon-spin on-left"></i>Refresh</button>
    <span class="divider"></span>
    <button><i class="icon-undo"></i></button>
    <button><i class="icon-redo"></i></button>
    <span class="divider"></span>
    <button><i class="icon-paragraph-left"></i></button>
    <button><i class="icon-paragraph-center"></i></button>
    <button><i class="icon-paragraph-right"></i></button>
    <button><i class="icon-paragraph-justify"></i></button>
</div>

Colorize icon & captions

<div class="toolbar fg-red">
    <button>...</button>
    <button>...</button>
    <button>...</button>
</div>

Toolbar groups

<div class="toolbar fg-red">
    <div class="toolbar-group">
        <button><i class="icon-folder-2"></i></button>
        <button><i class="icon-floppy"></i></button>
        <button><i class="icon-spin"></i></button>
    </div>
    <div class="toolbar-group fg-green">
        <button><i class="icon-undo"></i></button>
        <button><i class="icon-redo"></i></button>
    </div>
    <div class="toolbar-group fg-darkTeal transparent">
        <button><i class="icon-paragraph-left"></i></button>
        <button><i class="icon-paragraph-center"></i></button>
        <button><i class="icon-paragraph-right"></i></button>
        <button><i class="icon-paragraph-justify"></i></button>
    </div>
</div>

Image button

<button class="image-button primary">
    Download
    <img src="images/download-32.png" class="bg-cobalt">
</button>
<button class="image-button danger">
    GitHub
    <i class="icon-github bg-red"></i>
</button>
<button class="image-button bg-darkGreen fg-white image-left">
    Windows
    <i class="icon-windows bg-green fg-white"></i>
</button>
<button class="image-button warning image-left">
    Download
    <img src="images/download-32.png" class="bg-cobalt">
</button>

Shortcuts

<button class="shortcut">
    <i class="icon-rocket"></i>
    Rocket
</button>
<button class="shortcut">
    <i class="icon-rocket"></i>
    Rocket
    <small class="bg-cobalt fg-white">10</small>
</button>

Also you can use build-in classes for button to additional quick styling: .primary, .info, .success, .warning, .danger, .inverse, .link.

Button Dropdown

Button dropdown required metro-dropdown.js widget. 

<div class="button-dropdown">
    <button class="dropdown-toggle">Click Me</button>
    <ul class="dropdown-menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li class="divider"></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

<div class="button-dropdown">
    <button class="dropdown-toggle">Click Me</button>
    <ul class="dropdown-menu place-right">
        ...
    </ul>
</div>

You can change button color with build in classes. 

<div class="button-dropdown">
    <button class="dropdown-toggle primary">Primary</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle info">Info</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle success">Success</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle warning">Warning</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle danger">Danger</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle inverse">Inverse</button>
</div>
<div class="button-dropdown">
    <button class="dropdown-toggle link">Link</button>
</div>

Pagination

Metro UI CSS provides pagination buttons. 

<div class="pagination">...</div>
<div class="pagination small">...</div>
<div class="pagination mini">...</div>

<div class="pagination">
    <ul>
        <li class="first"><a><i class="icon-first-2"></i></a></li>
        <li class="prev"><a><i class="icon-previous"></i></a></li>
        <li><a>1</a></li>
        <li><a>2</a></li>
        <li class="active"><a>3</a></li>
        <li class="spaces"><a>...</a></li>
        <li class="disabled"><a>4</a></li>
        <li><a>500</a></li>
        <li class="next"><a><i class="icon-next"></i></a></li>
        <li class="last"><a><i class="icon-last-2"></i></a></li>
    </ul>
</div>

Button Set

This component required metro-button-set.js. 

<div class="button-set">
    <button class="active">One</button>
    <button>Two</button>
    <button>Three</button>
    <button>Four</button>
    <button>Five</button>
</div>

Using

You can activate component manually or with data-role attribute.

Activate with data-*

<div class="button-set" data-role="button-set">...</div>

Activate with manually javascript

$("#component_id").buttonset();

When user press button, component fired event click. You can set handler for this event. 

$("#component_id").buttonset({
    click: function(btn, on){...}
});
// or
$("#component_id").buttonset().bind("buttonsetclick", function(event, btn, on){...});

// where btn is a $(current_button)
// and on - state of current button (pressed: true, not-pressed: false)

Button Group

This component required metro-button-set.js. 

<div class="button-set">
    <button class="active">One</button>
    <button>Two</button>
    <button>Three</button>
    <button>Four</button>
    <button>Five</button>
</div>

Using

You can activate component manually or with data-role attribute.

Activate with data-*

<div class="button-set" data-role="button-group">...</div>

Activate with manually javascript

$("#component_id").buttongroup();

When user press button, component fired event click. You can set handler for this event. 

$("#component_id").buttongroup({
    click: function(btn, on){...}
});
// or
$("#component_id").buttongroup().bind("buttongroupclick", function(event, btn, on){...});

// where btn is a $(current_button)
// and on - state of current button (pressed: true, not-pressed: false)

Breadcrumbs

<nav class="breadcrumbs">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active"><a href="#">Data</a></li>
    </ul>
</nav>

<nav class="breadcrumbs small">...</nav>
<nav class="breadcrumbs mini">...</nav>