ionic-framework/ionic/components/button/test/outline/main.html

<div class="padding" style="text-align:center">

  <p>
    <button outline>D</button>
    <button outline class="hover">D.hover</button>
    <button outline class="activated">D.activated</button>
  </p>

  <p>
    <button outline primary>P</button>
    <button outline primary class="hover">P.hover</button>
    <button outline primary class="activated">P.activated</button>
  </p>

  <p>
    <button outline secondary>S</button>
    <button outline secondary class="hover">S.hover</button>
    <button outline secondary class="activated">S.activated</button>
  </p>

  <p>
    <button outline danger>D</button>
    <button outline danger class="hover">D.hover</button>
    <button outline danger class="activated">D.activated</button>
  </p>

  <p>
    <button outline light>L</button>
    <button outline light class="hover">L.hover</button>
    <button outline light class="activated">L.activated</button>
  </p>

  <p>
    <button outline stable>S</button>
    <button outline stable class="hover">S.hover</button>
    <button outline stable class="activated">S.activated</button>
  </p>

  <p>
    <button outline dark>D</button>
    <button outline dark class="hover">D.hover</button>
    <button outline dark class="activated">D.activated</button>
  </p>

  <p>
    <button outline primary block>button[outline][block][primary]</button>
  </p>

  <p>
    <button outline primary block class="hover">[outline][block][primary].hover</button>
  </p>

  <p>
    <button outline primary block class="activated">[outline][block][primary].activated</button>
  </p>

</div>