@vcl/vcl/button/demo/example-variants.html

The whole VCL in one package

<button type="button" class="button emphasized">
  <div class="icogram"><span class="text">Emphasized</span></div>
</button>

<button type="button" class="button emphasized disabled" disabled>
  <div class="icogram"><span class="text">Emphasized disabled</span></div>
</button>

<br><br>
<button type="button" class="button transparent">
  <div class="icogram"><span class="text">Transparent</span></div>
</button>

<button type="button" class="button transparent disabled" disabled>
  <div class="icogram"><span class="text">Transparent disabled</span></div>
</button>

<br><br>
<button type="button" class="button emphasized-transparent">
  <div class="icogram"><span class="text">Emphasized-Transparent</span></div>
</button>

<button type="button" class="button emphasized-transparent disabled" disabled>
  <div class="icogram"><span class="text">Emphasized-Transparent disabled</span></div>
</button>

<br><br>
<button type="button" class="button half-transparent">
  <div class="icogram"><span class="text">Half transparent</span></div>
</button>

<button type="button" class="button half-transparent disabled" disabled>
  <div class="icogram"><span class="text">Half transparent disabled</span></div>
</button>

<br><br>
<div style="display: inline-block; background-color: #515151;">
  <button type="button" class="button transparent-alt">
    <div class="icogram"><span class="text">Transparent alternative</span></div>
  </button>

  <button type="button" class="button transparent-alt disabled" disabled>
    <div class="icogram"><span class="text">Transparent alternative disabled</span></div>
  </button>
</div>

<br><br>
<button type="button" class="button danger">
  <div class="icogram"><span class="text">Danger</span></div>
</button>

<button type="button" class="button danger disabled" disabled>
  <div class="icogram"><span class="text">Danger disabled</span></div>
</button>

<br><br>
<button type="button" class="button suggestive">
  <div class="icogram"><span class="text">Suggestive</span></div>
</button>

<button type="button" class="button suggestive disabled" disabled>
  <div class="icogram"><span class="text">Suggestive disabled</span></div>
</button>

<br><br>
<button type="button" class="button transparent outline">
  <div class="icogram"><span class="text">Transparent and Outline</span></div>
</button>

<button type="button" class="button transparent outline disabled">
  <div class="icogram"><span class="text">Transparent disabled</span></div>
</button>

<br><br>
<button type="button" class="button square circular">
  <div class="icogram" >
    <div class="icon fas fa-chevron-right" aria-hidden="true" aria-label="Label for icon only button" role="img"></div>
  </div>
</button>