Buttons

@@adsense
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 buttons

Anchor
Div
Span 

                <button class="button">Caption</button>
                <button class="button" disabled>Caption</button>
                <div class="button">Caption</div>
                <a class="button">Caption</a>
                <span class="button">Caption</span>
                <button class="button rounded">Rounded</button>
                <button class="button cycle-button">+</button>
                <button class="button square-button">OK</button>

With icons

support both: icon fonts and images


                <button class="button"><span class="mif-checkmark"></span> Primary</button>
                <button class="button"><img src="images/Checkmark.png"> Primary</button>

Any sizes


                <button class="button mini-button">Caption</button>
                <button class="button small-button">Caption</button>
                <button class="button large-button">Caption</button>

Any colors (predefined and custom)


                <button class="button primary">Primary</button>
                <button class="button success">Success</button>
                <button class="button info">Info</button>
                <button class="button danger">Danger</button>
                <button class="button warning">Warning</button>
                <button class="button link">Link</button>
                <button class="button bg-pink bg-active-darkPink fg-white">Custom</button>

Cool buttons

with predefined classes


                <button class="button success block-shadow-success text-shadow">Button</button>
                <button class="button warning block-shadow-warning text-shadow">Button</button>
                <button class="button danger block-shadow-danger text-shadow">Button</button>
                <button class="button info block-shadow-info text-shadow">Button</button>
                <button class="button loading-pulse">Download NOW</button>
                <button class="button loading-pulse lighten primary">Download NOW</button>
                <button class="button loading-cube">Loading...</button>
                <button class="button loading-cube lighten danger">Loading...</button>

Command button


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

Toolbars


                <!-- Horizontal -->
                <div class="toolbar">
                    <div class="toolbar-section">
                        <button class="toolbar-button">...</button>
                        ...
                        <button class="toolbar-button">...</button>
                    </div>
                    ...
                    <div class="toolbar-section">
                        <button class="toolbar-button">...</button>
                        ...
                        <button class="toolbar-button">...</button>
                    </div>
                </div>

                <!-- Vertical -->
                <div class="v-toolbar">...</div>

Image button

Anchor
Anchor 

                <button class="image-button">
                    Share this
                    <span class="icon mif-share"></span>
                </button>
                <button class="image-button icon-right">
                    Location
                    <img src="images/location.png" class="icon">
                </button>
                <button class="image-button small-button">
                    Share this
                    <span class="icon mif-share"></span>
                </button>

Shortcut button

Rocket 

                <a class="shortcut-button">
                    <span class="icon mif-rocket"></span>
                    <span class="title">Rocket</span>
                </a>
                <button class="shortcut-button bg-cyan bg-active-darkBlue fg-white">
                    <span class="icon mif-rocket"></span>
                    <span class="title">Rocket</span>
                    <span class="badge">10</span>
                </button>

Dropdown button


                <!-- left -->
                <div class="dropdown-button">
                    <button class="button dropdown-toggle">Menu</button>
                    <ul class="split-content d-menu" data-role="dropdown">
                        <li><a href="#">Reply</a></li>
                        <li><a href="#">Reply All</a></li>
                        <li><a href="#">Forward</a></li>
                    </ul>
                </div>

                <!-- right -->
                <div class="dropdown-button place-right">
                    <button class="button dropdown-toggle">Menu</button>
                    <ul class="split-content d-menu place-right" data-role="dropdown">
                        <li><a href="#">Reply</a></li>
                        <li><a href="#">Reply All</a></li>
                        <li><a href="#">Forward</a></li>
                    </ul>
                </div>

Split button


                <div class="split-button">
                    <button class="button">Reply</button>
                    <button class="split dropdown-toggle"></button>
                    <ul class="split-content d-menu" data-role="dropdown">
                        <li><a href="#">Reply</a></li>
                        <li><a href="#">Reply All</a></li>
                        <li><a href="#">Forward</a></li>
                    </ul>
                </div>

Pagination


                <div class="pagination">
                    <span class="item">val</span>
                    <span class="item current">val</span>
                    <span class="item disabled">val</span>
                    <span class="item spaces">...</span>
                    <span class="item">val</span>
                </div>

                <div class="pagination rounded">...</div>
                <div class="pagination cycle">...</div>
                <div class="pagination no-border">...</div>

Breadcrumbs

breadcrumbs

breadcrumbs2

                <ul class="breadcrumbs">
                    <li><a href="#"><span class="icon mif-home"></span></a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">Windows 10</a></li>
                </ul>

                <ul class="breadcrumbs dark">...</ul>

                <ul class="breadcrumbs2">...</ul>
                <ul class="breadcrumbs2 small">...</ul>
                <ul class="breadcrumbs2 mini">...</ul>