Foundation CSS Buttons

Foundation CSS provides flexible and responsive button components for modern web interfaces.

Button Styles

<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button success">Success</button>
<button class="button warning">Warning</button>
<button class="button alert">Alert</button>

Button Sizes

<button class="button tiny">Tiny</button>
<button class="button small">Small</button>
<button class="button">Default</button>
<button class="button large">Large</button>
<button class="button expanded">Expanded</button>

Hollow Buttons

<button class="button hollow primary">Primary</button>
<button class="button hollow secondary">Secondary</button>
<button class="button hollow success">Success</button>
<button class="button hollow warning">Warning</button>
<button class="button hollow alert">Alert</button>

Button Groups

<div class="button-group">
  <a class="button">Left</a>
  <a class="button">Middle</a>
  <a class="button">Right</a>
</div>

<div class="stacked button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

Disabled Buttons

<button class="button primary" disabled>Disabled</button>
<button class="button secondary disabled">Disabled</button>

Buttons with Icons

<button class="button primary">
  <i class="fi-download"></i> Download
</button>

Up next: Foundation CSS Forms