Metro UI CSS

Push Button

You can also change the color of the button by
adding bg-color-* class. Example:

You can use tag <a> for creating button with class .button

Button Button Button

Command Button

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

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

    <button class="command-button default">...</button>
    <button class="command-button" disabled>...</button>

Toolbar

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

Toolbar buttons group

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

Toolbar Vertical

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

Toolbar Vertical with groups

    <div class="toolbar-vertical">
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
        ...
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
    </div>

Image button

    <button class="image-button"> Caption <img/> </button>
    ===================
    <button class="image-button bg-color-darken fg-color-white">Download<img src="images/down.png"/></button>

Any size of button

    <button class="mini"> Caption </button>
    <button> Caption </button>
    <button class="big"> Caption </button>

Button with icon

    <button><i class="icon-*"></i>Caption</button>
    <button>Caption<i class="icon-*"></i></button>
    <button class="default"><i class="icon-*"></i>Caption</button>

Shortcuts with icon

You can use any tags to create shortcut button. This may be a, button, span, etc. To set background or foreground color shortcut or badge in shortcut, you can use color classes.

    <button class="shortcut">
        <span class="icon">
            <i class="icon-*"></i>
        </span>
        <span class="label">
            Caption
        </span>
        <span class="badge">100</span>
    </button>

Pagination control

1
2
3
...
4
500

    <div class="pagination">
        <ul>
            <li class="first"><a></a></li>
            <li class="prev"><a></a></li>
            <li><a>1</a></li>
            ...
            <li class="active"><a>1</a></li>
            <li class="disabled"><a>1</a></li>
            <li class="spaces"><a>...</a></li>
            ...
            <li><a>N</a></li>
            <li class="next"><a></a></li>
            <li class="last"><a></a></li>
        </ul>
    </div>