Green Button 

<!-- Default -->
<a href="#" target="_blank" rel="noopener" class="green-button  " data-module="greenButton">
    <span class="green-button__base"></span>
    <span class="green-button__side"></span>
    <span class="green-button__top"></span>
    <span class="green-button__text">For accessibility</span>
</a>

<!-- Small -->
<a href="#" target="_blank" rel="noopener" class="green-button green-button--small " data-module="greenButton">
    <span class="green-button__base"></span>
    <span class="green-button__side"></span>
    <span class="green-button__top"></span>
    <span class="green-button__text">For accessibility</span>
</a>

<!-- Campaign Mode -->
<a href="#" target="_blank" rel="noopener" class="green-button green-button--bold-green js-green-button" data-module="greenButton">
    <span class="green-button__base"></span>
    <span class="green-button__side"></span>
    <span class="green-button__top"></span>
    <span class="green-button__text">For accessibility</span>
</a>

<a href="{{url}}" {{#if target}} target="{{target}}" {{#ifEquals target "_blank"}} rel="noopener"{{/ifEquals}} {{/if}} class="green-button {{#if modifier}}green-button--{{modifier}}{{/if}} {{#if additionalClasses}}{{additionalClasses}}{{/if}}"  data-module="greenButton">
    <span class="green-button__base"></span>
    <span class="green-button__side"></span>
    <span class="green-button__top"></span>
    <span class="green-button__text">{{text}}</span>
</a>
 
/* Default */
{
  "url": "#",
  "text": "For accessibility",
  "target": "_blank"
}

/* Small */
{
  "url": "#",
  "text": "For accessibility",
  "target": "_blank",
  "modifier": "small"
}

/* Campaign Mode */
{
  "url": "#",
  "text": "For accessibility",
  "target": "_blank",
  "modifier": "bold-green",
  "additionalClasses": "js-green-button"
}

There are no notes for this item.