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.
Please note that the selection of button styles as provided by this style-guide is somewhat limited, as motivated by a desire for consistency over customizability.
You can create a button using minimal markup.
<!-- Default Button -->
<button>Default Button</button>
Note that button styles are attached either to elements with the <button> or
to elements containing the .button class, and as such, these styles can be
applied to any element.
It is recommended that these styles are only applied to elements with the
<button> or <a> tags.
<!-- Using an anchor tag -->
<a href="#" class="button" id="button-primary">Default Button</a>
Please use the <a> tag if the button is to act like
a link, and the <button> tag otherwise.
Additional classes can be added to your button to change its color.
Some of these classes denote a button's emphasis.
<!-- Emphasis Color Classes -->
<button class="button">Default Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button tertiary">Tertiary Button</button>
<button class="button dull">Dull Button</button>
Other classes denote a button's context.
<!-- Contextual Color Classes -->
<button class="button success">Success Button</button>
<button class="button alert">Alert Button</button>
<button class="button warning">Warning Button</button>
<button class="button info">Info Button</button>
We have also provided for you a .ghost button to be used on dark backgrounds.
<div class="bg-dark-grey padding-medium">
<button class="button ghost">Ghost Button</button>
</div>
Additional classes can be added to your button to change its size.
<!-- Size Classes -->
<button class="button large">Large Button</button>
<button class="button">Default Button</button>
<button class="button small">Small Button</button>
<button class="button tiny">Tiny Button</button>
By default, buttons display as inline-block and only take up the room
needed by the text they contain. To establish a new block context and expand
the button to the size of its container, use the .expand class.
<!-- Block-level Modifier Classes -->
<button class="button expand">Expanded Button</button>
To render a button with a disabled state, simply add a .disabled class
or a [disabled] attribute.
<!-- Disable via Class -->
<button class="button disabled">Disabled Button</button>
<!-- Disable via Attribute -->
<button class="button" disabled>Disabled Button</button>
The disabled state applies to all color variants discussed above.
<!-- Disabled Emphasis Buttons -->
<div>
<button class="button" disabled>Default Button</button>
<button class="button secondary" disabled>Secondary Button</button>
<button class="button tertiary" disabled>Tertiary Button</button>
<button class="button dull" disabled>Dull Button</button>
</div>
<!-- Disabled Contextual Buttons -->
<div>
<button class="button success" disabled>Success Button</button>
<button class="button alert" disabled>Alert Button</button>
<button class="button warning" disabled>Warning Button</button>
<button class="button info" disabled>Info Button</button>
</div>
<!-- Disabled Ghost Buttons -->
<div class="bg-dark-grey padding-medium">
<button class="button ghost" disabled>Ghost Button</button>
</div>
To render a button with an active state, simply add a .active class.
<div>
<button>Default Button</button>
<button class="active">Active Button</button>
</div>
<div>
<button class="secondary">Secondary Button</button>
<button class="secondary active">Active Button</button>
</div>
<div>
<button class="tertiary">Tertiary Button</button>
<button class="tertiary active">Active Button</button>
</div>
<div>
<button class="dull">Dull Button</button>
<button class="dull active">Active Button</button>
</div>
<div>
<button class="success">Success Button</button>
<button class="success active">Success Button</button>
</div>
<div>
<button class="warning">Warning Button</button>
<button class="warning active">Warning Button</button>
</div>
<div>
<button class="alert">Alert Button</button>
<button class="alert active">Alert Button</button>
</div>
<div>
<button class="info">Info Button</button>
<button class="info active">Info Button</button>
</div>
<div class="bg-dark-grey padding-medium">
<button class="ghost">Ghost Button</button>
<button class="ghost active">Ghost Button</button>
</div>
The Select-Button is meant to replace Foundation's Split Button with a similar component that uses native functionality to achieve the same end.
<!-- Example select button -->
<select class="button">
<option value="Select Button">Select Button</option>
<option value="Lorem ipsum">Lorem ipsum</option>
<option value="Dolor sit amet">Dolor sit amet</option>
<option value="Eu est tamquam">Eu est tamquam</option>
</select>
The width of a Select Button is determined by the width of the longest
<option> it contains.
<!-- Short select button -->
<select class="button">
<option value="Short">Short</option>
</select>
<!-- Long select button -->
<select class="button">
<option value="Long">While, on the other hand, this button is quite long.</option>
<option value="Short">A useless, short option.</option>
</select>
You may expand the button with the .expand class, just as you would with
a button.
<!-- Expanded select button -->
<select class="button expand">
<option value="Expanded">Expanded Select Button</option>
</select>
You may add colors to a Select-Button just as you would a standard button.
<!-- Default select button -->
<select class="button">
<option value="Default">Select Button</option>
</select>
<!-- Success select button -->
<select class="button secondary">
<option value="Secondary">Secondary Button</option>
</select>
In addition, you may resize a Select-Button just as you would a standard button.
<!-- Tiny select button -->
<select class="button tiny">
<option value="Tiny">Tiny Select Button</option>
</select>
<!-- Small select button -->
<select class="button small">
<option value="Small">Small Success Button</option>
</select>
<!-- Default select button -->
<select class="button">
<option value="Default">Default Select Button</option>
</select>
<!-- Large select button -->
<select class="button large">
<option value="Large">Large Select Button</option>
</select>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.