zurb-foundation-5/doc/includes/getting_started/gs_button_example.html

Foundation 5 for npm (no code modification from original repo)

<div class="row">
  <div class="small-6 columns">
    <a href="#" class="button expand">Default Color</a>
  </div>
  <div class="small-6 columns">
    <a href="#" class="button secondary expand">Secondary Color</a>
  </div>
  <div class="small-6 columns">
    <a href="#" class="button success expand">Success Color</a>
  </div>
  <div class="small-6 columns">
    <a href="#" class="button alert expand">Alert Color</a>
  </div>
</div>
<div class="row">
  <div class="small-4 columns">
    <a href="#" class="button expand">Default</a>
  </div>
  <div class="small-4 columns">
    <a href="#" class="button radius expand">Radius</a>
  </div> 
  <div class="small-4 columns">
    <a href="#" class="button round expand">Round</a>
  </div>
</div>
<section class="gs-buttongroup">
  <div class="row"> 
    <div class="small-12 columns">
      <ul class="button-group expand round">
        <li><a href="#" class="button alert">Button</a></li>
        <li><a href="#" class="button alert">Group</a></li>
      </ul>
    </div>
  </div>
</section>
<div class="row gs-hoverbutton">
  <div class="small-6 columns">
    <a href="#" class="button round expand split">Split Button <span data-dropdown="drop"></span></a><br>
    <ul id="drop" class=" expand f-dropdown" data-dropdown-content>
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>
  </div>
  <div class="small-6 columns">
    <a href="#" class="alert expand button" data-dropdown="hover1" data-options="is_hover:true">Hover &amp; Click Button</a><br>
    <ul id="hover1" class="f-dropdown" data-dropdown-content>
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>
  </div>
</div>