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