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 .btnclass. Customize the size of the buttons using .btn--lgand .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-1and .btn--primary-2to 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--iconon the button and place an <i> icon element inside the .btn__textelement. 

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

Social Buttons

Use the classes .bg--facebook, .bg--twitteretc. 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>