Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email
Already have an account? Login

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 →

Standard Buttons

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>
.btn--sm .btn .btn--lg

Coloured Buttons

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>
.btn--primary .btn--primary-1 .btn--primary-2

Icon Buttons

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>
New document Add To Bag

Social Buttons

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>