NCC Digital Design Guide

Buttons As Links 

<!-- Default -->
<a href="#" class="button" title="Button">Button</a>


<!-- Button Secondary -->
<a href="#" class="button--secondary" title="Button Secondary">Button Secondary</a>


<!-- Button Themed -->
<a href="#" class="button--alt" title="Button Themed">Button Themed</a>


<!-- Disabled Button -->
<a href="#" class="button" title="Disabled Button">Disabled Button</a>


<a href="#" class="{{modifier}}" title="{{button-text}}">{{button-text}}</a>
 
/* Default */
{
  "button-text": "Button",
  "modifier": "button"
}


/* Button Secondary */
{
  "button-text": "Button Secondary",
  "modifier": "button--secondary"
}


/* Button Themed */
{
  "button-text": "Button Themed",
  "modifier": "button--alt"
}


/* Disabled Button */
{
  "button-text": "Disabled Button",
  "modifier": "button"
}

Button Pattern