Buttons
Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
Basic
You can create a button using minimal markup.
HTML
<a href="#" class="button">Default Button</a>Button Sizing
Additional classes can be added to your component to change its size and shape.
HTML
<!-- Size Classes --> <a href="#" class="button tiny">Tiny Button</a> <a href="#" class="button small">Small Button</a><a href="#" class="button">Default Button</a> <a href="#" class="button disabled">Disabled Button</a> <a href="#" class="button large">Large Button</a> <a href="#" class="button expand">Expanded Button</a> <!-- Radius Classes --> <a href="#" class="button round">Round Button</a> <a href="#" class="button radius">Radius Button</a>
Button Colors
Additional classes can be added to your component to change its color.
HTML
<!-- Color Classes --><a href="#" class="button">Default Button</a> <a href="#" class="button success">Success Button</a>
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button alert">Alert Button</a>
<a href="#" class="button info">Info Button</a>
<a href="#" class="button disabled">Disabled Button</a>