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>