Buttons
Buttons
On <a> Tags
- HSM comes with predefined button styles.
-The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> tag or <a> elements (You can also use these classes on any inline elements ).
- .btn class adds .5em/8px of margin all around.
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-primary active">Primary - active</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-danger">Danger</a>
<input type="submit" value="Submit" class="btn">
<a href="#" class="btn btn-link">Link</a>
On <button> Tags
<a href="#" class="btn btn-default btn-x-sm">X-Small</a>
<a href="#" class="btn btn-default btn-sm">Small</a>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-default btn-lg">Large</a>
Button Sizes
HSM also comes with buttons in few different sizes from extra-small to extra-large.
<a href="#" class="btn btn-default btn-x-sm">X-Small</a> <a href="#" class="btn btn-default btn-sm">Small</a> <a href="#" class="btn btn-default">Default</a> <a href="#" class="btn btn-default btn-lg">Large</a>
You can combine classes to get preferred output. Here are some examples.
<button class="btn btn-default btn-x-sm">Default</button>
<button class="btn btn-primary btn-sm">Primary-Small</button>
<button class="btn btn-primary active">Default-size</button>
<button class="btn btn-success btn-lg">Success-Large</button>
<button class="btn btn-danger btn-xl">Danger-XL</button>