foundation-emails/test/visual/pages/button-inky.html

A framework for responsive emails

<style>
  .border {
    border-bottom: 3px solid blue;
  }
</style>
<container>
<a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/28/2016</a>
  <row>
    <columns small="12" large="12">
      <center>
      <button href="http://get.foundation" class="tiny" href="http://get.foundation">I am a tiny button</button>
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="small" href="http://get.foundation">I am a small button</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="" href="http://get.foundation">I am a default button</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="large" href="http://get.foundation">I am a large button</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="secondary" href="http://get.foundation">I am secondary</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="success" href="http://get.foundation">I am successful</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button class="alert" href="http://get.foundation">I alert</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button class="warning" href="http://get.foundation">I warn</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="expand">I expand</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
    Expand small only with center tag
      <center>
        <button href="http://get.foundation" class="small-expand">Expand small only</button>
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
    Expand small only
      <center>
        <button href="http://get.foundation" class="small-expand">Expand small only</button>
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
    <center>
      <button href="http://get.foundation" href="http://get.foundation" class="expand">I expand and have lots of text</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
    Radius and round edges except Outlook 2007, 10, 13
      <button href="http://get.foundation" class="radius">I have a radius</button>
      <button href="http://get.foundation" class="radius secondary">I have a radius</button>
      <button href="http://get.foundation" class="radius alert">I have a radius</button>
      <button href="http://get.foundation" class="radius warning">I have a radius</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="rounded">I am rounded</button>
      <button href="http://get.foundation" class="rounded secondary">I am rounded</button>
      <button href="http://get.foundation" class="rounded alert">I am rounded</button>
      <button href="http://get.foundation" class="rounded warning">I am rounded</button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <center>
        <button href="http://get.foundation" class="radius">I am centered</button>
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <center>
        <button href="http://get.foundation" class="border">I am centered</button>
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, qui aliquam rerum aliquid sapiente nulla et ipsa autem error, corporis hic! At temporibus aspernatur sed facilis odit harum, nobis fugit?</button>
    </columns>
  </row>
    <row>
    <columns small="12" large="12">
      <button class="expanded" href="http://get.foundation">Lorem ipsum </button>
    </columns>
  </row>
  <row>
    <columns small="12" large="12">
      <button href="http://get.foundation" class="hollow" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow expanded" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow primary" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow secondary" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow warning" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow alert" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow success" href="http://get.foundation">I am a small button</button>
      <button href="http://get.foundation" class="hollow disabled" href="http://get.foundation">I am a small button</button>
    </columns>
  </row>
</container>