Buttons
Buttons are used to navigate through the website and for actions, like triggering a modal or validating a form. They should be (and are) easily distinguishable from another components.
You can find the below components in _button.scss
.
Default buttons : primary, default, info
The first class of all buttons is .btn
. It gives the basic design that brings visual consistency accross the website.
By default, buttons are blocks that fit 100% of their container. There is then 2 manners to manage their width :
- inserting the button inside a grid, so it should fit all its column's width ;
- adding a particular class that specifies a proper
width
property.
The different colors show the hierarchy between the buttons as well as their function. Choose among the given classes regarding the role of your button.
<a href="#" class="btn btn-primary" title="">
<i class="fa fa-check"></i>
<span>Button</span>
</a>
<a href="#" class="btn btn-default" title="">
<i class="fa fa-check"></i>
<span>Button</span>
</a>
<a href="#" class="btn btn-info" title="">
<i class="fa fa-check"></i>
<span>Button</span>
</a>
Large buttons
Larger buttons can be used on the landing page to facilitate the comprehension of what the users can do on the website.
<a href="#" target="_blank" title="" class="btn btn-primary btn-lg">
<i class="fa fa-tag"></i>
<span>Find Used Equipment</span>
</a>
<a href="#" target="_blank" title="" class="btn btn-default btn-lg">
<i class="fa fa-envelope"></i>
<span>Subscribe to Newsletter</span>
</a>
Dropdown button
Dropdown buttons are used to offer a range of similar actions, such as preview or download a brochure according to specific languages.
<div class="btn-group btn-block dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-caret-down pull-right"></i>
<i class="fa fa-download"></i>
<span>Brochures</span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">English</li>
<li class="dropdown-item">
<a href="#">
<i class="fa fa-eye"></i>
<span>Preview</span>
</a>
</li>
<li class="dropdown-item">
<a href="http://www.scribd.com/document_downloads/138455093?extension=pdf&from=embed&source=embed">
<i class="fa fa-download"></i>
<span>Download</span>
</a>
</li>
<li role="presentation" class="dropdown-divider"></li>
<li role="presentation" class="dropdown-header">French</li>
<li class="dropdown-item">
<a href="#">
<i class="fa fa-eye"></i>
<span>Preview</span>
</a>
</li>
<li class="dropdown-item">
<a href="http://www.scribd.com/document_downloads/138455091?extension=pdf&from=embed&source=embed">
<i class="fa fa-download"></i>
<span>Download</span>
</a>
</li>
...
<li role="presentation" class="dropdown-divider"></li>
</ul>
</div>