Source:
styleguide/styleguide.less, line 333
5.1 #permalink Buttons
For to be clicked on. All buttons on the site should use some variation on this button.
Example
Markup
<a class="btn">Click me</a>
Source:
modules/05_user_interface/buttons.less, line 6
Example
Markup
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center"> </div>
<div class="grid-2 text_fontSizeSmaller layout_center">btn</div>
<div class="grid-2 text_fontSizeSmaller layout_center">btn_short</div>
<div class="grid-2 text_fontSizeSmaller layout_center">btn_shorter</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn</div>
<div class="grid-2 layout_center">
<a class="btn">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_short">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_shorter">click me</a>
</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_narrow</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrow">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrow btn_short">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrow btn_shorter">click me</a>
</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_narrower</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrower">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrower btn_short">click me</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrower btn_shorter">click me</a>
</div>
</div>
Source:
modules/05_user_interface/buttons.less, line 77
5.1.2 #permalink Colored buttons
Color buttons (can I get that in cornflower blue?)
Example
Markup
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">default</div>
<div class="grid-2 layout_center">
<a class="btn btn_narrow btn_shorter">default</a>
</div>
</div>
<!--
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary1</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary1Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary1Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary1 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
</div>
-->
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary2</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary2Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary2Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary2 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggPrimary2Lighter btn_narrow btn_shorter">lighter</a>
-->
</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary3</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggPrimary3Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary3Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary3 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggPrimary3Light btn_narrow btn_shorter">light</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggPrimary3Lighter btn_narrow btn_shorter">lighter</a>
-->
</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary4</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary4Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary4Dark btn_narrow btn_shorter">dark</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary4 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary4Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggPrimary4Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary1</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggSecondary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggSecondary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary2</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggSecondary2Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_ggSecondary2Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary2 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_ggSecondary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
</div>
Source:
modules/05_user_interface/buttons.less, line 168
5.1.3 #permalink Sometimes you want the background to show through
So many options, how to decide?
Example
Markup
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary1</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary2</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary3</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary3Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary4</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Dark btn_narrow btn_shorter">dark</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary1</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical col_defaultBg">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary2</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary2Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary2Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
</div>
Source:
modules/05_user_interface/buttons.less, line 354
Example
Markup
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary1 simple</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggPrimary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggPrimary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary2 simple</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary2Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary2Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary2 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary3 simple</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggPrimary3Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary3Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary3 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary3Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary3Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary4 simple</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary4Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary4Dark btn_narrow btn_shorter">dark</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary4 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary4Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggPrimary4Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary1 simple</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggSecondary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggSecondary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary2 simple</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggSecondary2Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_ggSecondary2Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary2 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_ggSecondary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary1 simple transparent</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggPrimary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggPrimary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary2 simple transparent</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary2Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary2Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary2 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary3 simple transparent</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggPrimary3Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary3Dark btn_narrow btn_shorter">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary3 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary3Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary3Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary4 simple transparent</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary4Darker btn_narrow btn_shorter">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary4Dark btn_narrow btn_shorter">dark</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary4 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary4Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggPrimary4Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary1 simple transparent</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggSecondary1Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggSecondary1Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary1 btn_narrow btn_shorter">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary1Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary1Lighter btn_narrow btn_shorter">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary2 simple transparent</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggSecondary2Darker btn_narrow btn_shorter">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_simple btn_transparent btn_ggSecondary2Dark btn_narrow btn_shorter">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary2 btn_narrow btn_shorter">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary2Light btn_narrow btn_shorter">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_simple btn_transparent btn_ggSecondary2Lighter btn_narrow btn_shorter">lighter</a>
</div>
</div>
Source:
modules/05_user_interface/buttons.less, line 541
5.1.5 #permalink Disabling buttons
Note that the mouseover animation doesn't work, and click events are disabled.
Example
Markup
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary1</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary1Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary1Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary1Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary2</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary2Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary3</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggPrimary3Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary3Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggPrimary4</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggPrimary4Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary1</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary1Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary1Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<!--
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary1Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
-->
</div>
<div class="grid-12 grid-parent layout_centerVertical">
<div class="grid-2 text_fontSizeSmaller layout_center">btn_ggSecondary2</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary2Darker btn_narrow btn_shorter" disabled="disabled">darker</a>
-->
</div>
<div class="grid-2 layout_center">
<!--
<a class="btn btn_transparent btn_ggSecondary2Dark btn_narrow btn_shorter" disabled="disabled">dark</a>
-->
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2 btn_narrow btn_shorter" disabled="disabled">normal</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2Light btn_narrow btn_shorter" disabled="disabled">light</a>
</div>
<div class="grid-2 layout_center">
<a class="btn btn_transparent btn_ggSecondary2Lighter btn_narrow btn_shorter" disabled="disabled">lighter</a>
</div>
</div>
Source:
modules/05_user_interface/buttons.less, line 819
5.1.6 #permalink Loading buttons
In addition to disabling your button, you can add a little animation to show that something is loading, and it will be available soon. Useful on simple pages with complex javascript where the button's click handler may not be loaded for some human-noticeable amount of time. In that case, add this class to the button in your html, then remove it when the javascript is ready.
Example
Markup
<a class="btn btn_loading" disabled>Loading</a>
Source:
modules/05_user_interface/buttons.less, line 1019
5.2 #permalink Form elements
To let the user send us data
Example
Markup
<div class="grid-4">
<input class="input_text" type="text" placeholder="I care about..." />
<input class="input_text input_text_colSecondary2" type="text" placeholder="your email" />
<input class="input_text input_text_ggPrimary1Dark" type="text" placeholder="your email" />
</div>
Source:
modules/05_user_interface/forms.less, line 5
5.2.1 #permalink Prevent display
To use an input that has browser-defined display, such as one with type=button or type=submit, but keep the semantic behavior, apply this class and style away!
Markup
<div class="grid-2 grid-parent col_ggPrimary1Dark layout_center layout_centerVertical layout_rel box_verticalPadded2">
<a href="javascript:void(0);" class="js-headerSearch-show"><span class="link_linkify"></span></a>
<input type="submit" class="grid-12 input_preventDisplay layout_inlineBlock sprite sprite_searchWhite layout_centerVertical text_fontSizeZero input_pointer"/>
</div>
Source:
modules/05_user_interface/forms.less, line 18
5.2.2 #permalink Input prefix / postfix
Put an arbitrary prefix in front of or postfix in back of a text input.
Example
$
Markup
<div class="input_prefix grid-10">$<input type="text"/></div>
Source:
modules/05_user_interface/forms.less, line 155
5.2.3 #permalink Custom form elements
Custom gg-styling of checkboxes and radio buttons. See https://css-tricks.com/the-checkbox-hack/
Example
Markup
<input type="checkbox" id="cbox" class="input-checkbox">
<label for="cbox" class="input-checkbox_label"><span class="input-checkbox_labelspan">GG Checkbox</span></label><br/>
<div>
<input type="radio" name="freq" checked="checked" value="one-time" id="freqOnce" class="input-toggle"><label for="freqOnce" class="input-toggle_label">one-time</label>
<input type="radio" name="freq" checked="checked" value="monthly" id="freqMonth" class="input-toggle"><label for="freqMonth" class="input-toggle_label">monthly</label>
</div>
Source:
modules/05_user_interface/forms_ext.less, line 5
5.2.4 #permalink input-blockLabel
Style a radio array as a grid of images. Hide the input with grid-0, and let this css style the label. Includes hover and selected states. Should be a11y-friendly.
Example
Markup
<div class="grid-parent">
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="211"
id="211"
required
/>
<label for="211" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/orange_thumbnail.png" alt="Orange"/>
</label>
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="212"
id="212"
required
checked="checked"
/>
<label for="212" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/map_thumbnail.png" alt="Map"/>
</label>
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="213"
id="213"
required
/>
<label for="213" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/youre_awesome_thumbnail.png" alt="You're Awesome"/>
</label>
</div>
Source:
modules/05_user_interface/forms_ext.less, line 158