With Metro UI 4 Jekyll you can easily create different types of buttons, stylized to Windows 8.
Button styles can be applied to anything with class .button applied.
Typically, you'll want to apply these to only <a> and <button> elements.
<button>Button</button> <a class="button">Button</a>
To change button size use built-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 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>
Add icons 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>
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 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>
<div class="toolbar">
<button>...</button>
<button>...</button>
<button>...</button>
</div>
<div class="toolbar no-spaces">
<button>...</button>
<button>...</button>
<button>...</button>
</div>
<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>
<div class="toolbar fg-red">
<button>...</button>
<button>...</button>
<button>...</button>
</div>
<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>
<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>
<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>
Add built-in classes for quick styling:
.primary, .info, .success,
.warning, .danger, .inverse, .link.
Dropdown buttons require metro-dropdown.js widget.
<div class="button-dropdown">
<button class="dropdown-toggle">Click Me</button>
<ul class="dropdown-menu" data-role="dropdown">
<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 built 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>
Metro UI 4 Jekyll 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>
This component requires 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>
You can activate component manually or with data-role attribute.
<div class="button-set" data-role="button-set">...</div>
$("#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)
This component requires 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>
You can activate component manually or with data-role attribute.
<div class="button-set" data-role="button-group">...</div>
$("#component_id").buttongroup();
When button is clicked, component fires event click.
You can set a 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)
<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>