Buttons

Buttons Colors

Freya uses .btn class for default button style. Customize the color of a button using .btn-* and .btn-outline-*. You can use the following classes.

Solid Buttons

<a href="#" class="btn btn-secondary">.btn-secondary</a>
<a href="#" class="btn btn-primary">.btn-primary</a>
<a href="#" class="btn btn-info">btn-info</a>
<a href="#" class="btn btn-success">.btn-success</a>
<a href="#" class="btn btn-warning">.btn-warning</a>
<a href="#" class="btn btn-danger">.btn-danger</a>
<a href="#" class="btn btn-dark">.btn-dark</a>

Outline Buttons

<a href="#" class="btn btn-outline-primary">.btn-outline-primary</a>
<a href="#" class="btn btn-outline-info">btn-outline-info</a>
<a href="#" class="btn btn-outline-success">.btn-outline-success</a>
<a href="#" class="btn btn-outline-danger">.btn-outline-danger</a>
<a href="#" class="btn btn-outline-dark">.btn-outline-dark</a>

Inverted Buttons

<a href="#" class="btn btn-white">.btn-white</a>
<a href="#" class="btn btn-outline-white">btn-outline-white</a>
<a href="#" class="btn btn-outline-warning">.btn-outline-warning</a>

Buttons Sizes

Customize the size of a button using .btn-xs , .btn-sm and .btn-lg

<a class="btn btn-outline-primary btn-xs" href="#">.btn-xs</a>
<a class="btn btn-outline-primary btn-sm" href="#">.btn-sm</a>
<a class="btn btn-outline-primary" href="#">.btn</a>
<a class="btn btn-outline-primary btn-lg" href="#">.btn-lg</a>

Buttons Shapes

Customize the shape of a button using .btn and .btn-capsule

<a href="#" class="btn btn-primary">.btn</a>
<a href="#" class="btn btn-primary btn-capsule">.btn-capsule</a>				

Buttons with Icon

Use .btn-icon-left or .btn-icon-right class for the icon position. For outline button, use .btn-outline-* . To make capsule like button, you can use.btn-capsule class.

<a href="#" class="btn btn-icon btn-primary btn-icon-left">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-primary btn-icon-right">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-outline-primary btn-icon-left">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-outline-primary btn-icon-right">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-primary btn-icon-left btn-capsule">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-primary btn-icon-right btn-capsule">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-outline-primary btn-icon-left btn-capsule">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>
<a href="#" class="btn btn-icon btn-outline-primary btn-icon-right btn-capsule">
	<span class="fa fa-gitlab">
	</span> .btn-icon
</a>

Special Buttons

You can use the classes .btn-facebook, .btn-twitter, .btn-google-plus, .btn-github etc. to color buttons with their corresponding brand colors.

<a href="#" class="btn btn-icon btn-facebook btn-icon-left">
	<span class="fa fa-facebook"></span> Join facebook
</a>
<a href="#" class="btn btn-icon btn-twitter btn-icon-left">
	<span class="fa fa-twitter"></span>	Join Twitter
</a>
<a href="#" class="btn btn-icon btn-google-plus btn-icon-left">
	<span class="fa fa-google-plus"></span>	Join Google+
</a>
<a href="#" class="btn btn-icon btn-github btn-icon-left">
	<span class="fa fa-github"></span> See Github
</a>

Play Buttons

Buttons Group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group .

<div class="btn-group">
	<button class="btn btn-secondary">.btn-secondary</button>
	<button class="btn btn-secondary">.btn-secondary</button>
	<button class="btn btn-secondary">.btn-secondary</button>
</div>