Buttons

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Stack's modular elements
at the Element Index Page ?

The default button style for Stack using the .btn class. Customize the size of the buttons using .btn--lg and .btn--sm.

<a class="btn" href="#">
	<span class="btn__text">Button Text</span>
</a>

Use the classes .btn--primary, .btn--primary-1 and .btn--primary-2 to colour the buttons using the theme's colour schemes.

<a class="btn btn--primary" href="#">
	<span class="btn__text">Button Text</span>
</a>

Use the class .btn--icon on the button and place an <i> icon element inside the .btn__text element.

<a class="btn btn--primary btn--icon" href="#">
	<span class="btn__text"><i class="icon-class"></i>Button Text</span>
</a>

Use the classes .bg--facebook, .bg--twitter etc. to colour buttons with their corresponding brand colours.

<a class="btn bg--facebook btn--icon" href="#">
	<span class="btn__text"><i class="icon-class"></i>Button Text</span>
</a>