Elements – Buttons

[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]

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 →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Standard Buttons

The default button style for Stack using the .btn class. Customize the size of the buttons using .btn–lg and .btn–sm.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][vc_column_text].btn–sm .btn .btn–lg[/vc_column_text][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Coloured Buttons

Use the classes .btn–primary, .btn–primary-1 and .btn–primary-2 to colour the buttons using the theme’s colour schemes.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][vc_column_text].btn–primary .btn–primary-1 .btn–primary-2[/vc_column_text][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Icon Buttons

Use the class .btn–icon on the button and place an <i> icon element inside the .btn__text element.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][vc_column_text] New document Add To Bag[/vc_column_text][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Social Buttons

Use the classes .bg–facebook, .bg–twitter etc. to colour buttons with their corresponding brand colours.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][vc_column_text]

Join with Google Join with Pinterest[/vc_column_text][/vc_column][/vc_row][/vc_section]