Pure button lookings. You can use <button> tag and <a> tag also for all examples what you can find here, but the <a> tag needs a .btn class to look like a button.
You can use buttons like a standalone element or within a .button-list container. Standalone the buttons has got no margin at all, but in a container there is on the bottom and the right side.
<div class="btn-list">
<button>Button</button>
<a class="btn" href="#">Link</a>
</div>
Because buttons has got inline behavior in this framework you can align them as you want in a block container with text-left, text-center or with text.right. The default alignment is left so you don't need to use it, except with reason.
<div class="sample-container text-left">
<button class="btn-primary">Button Left</button>
</div>
<div class="sample-container text-center">
<button class="btn-primary">Button Center</button>
</div>
<div class="sample-container text-right">
<button class="btn-primary">Button Right</button>
</div>
There are 10 different types of button style exist what you can used on <button> and <a> tags.
<button class="btn-primary">Primary</button>
<button class="btn-inverse">Inverse</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-border">Border</button>
<button>Unstyled</button>
<button class="btn-text">Text</button>
<button class="btn-success">Success</button>
<button class="btn-info">Info</button>
<button class="btn-warning">Warning</button>
<button class="btn-error">Error</button>
You can disable all of them with the disable attribute.
<button class="btn-primary" disabled>Disabled</button>
<button class="btn-inverse" disabled>Disabled</button>
<button class="btn-secondary" disabled>Disabled</button>
<button class="btn-border" disabled>Disabled</button>
<button disabled>Disabled</button>
<button class="btn-text" disabled>Disabled</button>
<button class="btn-success" disabled>Disabled</button>
<button class="btn-info" disabled>Disabled</button>
<button class="btn-warning" disabled>Disabled</button>
<button class="btn-error" disabled>Disabled</button>
Built-in 4 button size exist, what you can use for button tag or a tag also like everything else.
<div class="btn-list">
<button class="btn-primary btn-xl">Extra Large</button>
<button class="btn-secondary btn-lg">Large</button>
<button class="btn-primary btn-md">Medium</button>
<button class="btn-secondary btn-sm">Small</button>
<button class="btn-primary btn-xs">Extra Small</button>
</div>
You can use any kind of web font iconset like FontAwesome anything else. You can use icons on any side or both.
<div class="btn-list">
<button class="btn-icon btn-primary">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button left</span>
</button>
<button class="btn-icon btn-secondary">
<span>Button right</span>
<i class="fa fa-coffee" aria-hidden="true"></i>
</button>
<button class="btn-icon btn-primary">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button both</span>
<i class="fa fa-coffee" aria-hidden="true"></i>
</button>
</div>
For testing purpose I used font aswesome to show icons, but it works for material icons, or any other iconset, even you own custom.
<div class="btn-list">
<button class="btn-icon btn-primary">
<i class="material-icons">menu</i>
<span>Button Icon</span>
</button>
<button class="btn-icon btn-primary">
<span>Button Icon</span>
<i class="material-icons">sentiment_very_satisfied</i>
</button>
</div>
The default button size is btn-md so you can leave this class.
<div class="btn-list">
<button class="btn-icon btn-primary btn-xl">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button Icon</span>
</button>
<button class="btn-icon btn-secondary btn-lg">
<i class="fa fa-bars" aria-hidden="true"></i>
<span>Button Icon</span>
</button>
<button class="btn-icon btn-primary btn-md">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button Icon</span>
</button>
<button class="btn-icon btn-secondary btn-sm">
<i class="fa fa-bars" aria-hidden="true"></i>
<span>Button Icon</span>
</button>
</div>
Block style button btn-block on buttons or another
<button class="btn-block btn-primary ">
Block button
</button>
<button class="btn-icon btn-primary ">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button group 1</span>
</button>
In a btn-group you can put buttons or another btn-group.
<div class="btn-group">
<button class="btn-icon btn-primary ">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button group 1</span>
</button>
<div class="btn-group">
<button class="btn-icon btn-secondary ">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button group 2</span>
</button>
<button class="btn-icon btn-primary ">
<i class="fa fa-coffee" aria-hidden="true"></i>
<span>Button group 2</span>
</button>
</div>
</div>
In this case you can use buttons or btn-groups as block elements with btn-block class.
<div class="btn-group">
<button class="btn-icon btn-primary ">
<span>Button Icon</span>
<i class="fa fa-coffee" aria-hidden="true"></i>
</button>
</div>