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.

Button primary
Button default
Button info 
<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.

Find Used Equipment
Subscribe to Newsletter 
<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>