Source: styleguide/styleguide.less, line 332

5.1 #permalink Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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
 
btn
btn_short
btn_shorter
btn_narrower
Markup
 <div class="grid-12 grid-parent layout_centerVertical">
   <div class="grid-2 text_fontSizeSmaller layout_center">&nbsp;</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
Example
default
btn_ggPrimary2
btn_ggPrimary3
btn_ggPrimary4
btn_ggSecondary1
btn_ggSecondary2
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 164
Example
btn_ggPrimary1
btn_ggPrimary2
btn_ggPrimary3
btn_ggPrimary4
btn_ggSecondary1
btn_ggSecondary2
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 347
Example
btn_ggPrimary1 simple
btn_ggPrimary2 simple
btn_ggPrimary3 simple
btn_ggPrimary4 simple
btn_ggSecondary1 simple
btn_ggSecondary2 simple
btn_ggPrimary1 simple transparent
btn_ggPrimary2 simple transparent
btn_ggPrimary3 simple transparent
btn_ggPrimary4 simple transparent
btn_ggSecondary1 simple transparent
btn_ggSecondary2 simple transparent
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 533
Example
btn_ggPrimary1
btn_ggPrimary2
btn_ggPrimary3
btn_ggPrimary4
btn_ggSecondary1
btn_ggSecondary2
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 811

5.1.6 #permalink Loading buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 1011
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

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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!

Example
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
Example
$
Markup
 <div class="input_prefix grid-10">$<input type="text"/></div>
Source: modules/05_user_interface/forms.less, line 155
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

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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 149