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.


A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag.

  • Use the <a> tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work.
  • Use the <button> tag if the button performs an action that changes something on the current page. <button> elements almost always require JavaScript to function.

Watch this part in video

Add the attribute type="button" to <button> elements, unless the button submits a form, in which case you use type="submit"

edit on codepen button
<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>


Additional classes can be added to your button to change its size and shape.

Watch this part in video

edit on codepen button
<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>


Add color classes to give buttons additional meaning.

Watch this part in video

edit on codepen button
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>

Custom Colors

If you're using the Sass version of Foundation, you can customize the button classes by editing the $button-palette map in your settings file. The button palette defaults to $foundation-palette.

If you don't need certain colors from the default palette, simply remove them from the list.

$button-palette: map-remove($foundation-palette, (
)) !default;

Or you can add more colors to the default palette.

$button-palette: map-merge($foundation-palette, (
    purple: #bb00ff
)) !default;

Or you can define your own custom button palette.

$button-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
) !default;

Text Colors

The text color for each button class is determined by either $button-color or $button-color-alt, whichever settings variable has more contrast.

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to check the contrast when changing color variables. To give all buttons the same color text, set $button-color and $button-color-alt to the same value — but know that doing so may decrease accessibility.

Disabled Buttons

The .disabled class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For <button> elements, you can add the disabled attribute to both disable and style it. If you want to disable a link, you should add the aria-disabled attribute to mark it as disabled for assistive technology.

Watch this part in video

edit on codepen button
<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>

Hollow Style

Add the .hollow class to a button to give it a hollow style. Change the $button-fill variable in your settings file to hollow to make this the default style. Changing this setting will remove the .hollow class from your CSS.

Watch this part in video

edit on codepen button
<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

Add a dropdown arrow to your button with the .dropdown class.

This doesn't add dropdown functionality automatically. To do that, you can attach our Dropdown plugin.

edit on codepen button
<button class="dropdown button tiny ">Dropdown Button</button>
<button class="dropdown button small ">Dropdown Button</button>
<button class="dropdown button">Dropdown Button</button>
<button class="dropdown button large ">Dropdown Button</button>
<button class="dropdown button expanded ">Dropdown Button</button>


Make sure that the text of the button is descriptive. If for some reason, your button contains no readable text (for example, just a symbol or icon), add screen reader-only text to the button to clarify its purpose. The symbol or icon should be wrapped in an element with the attribute aria-hidden="true", to prevent screen readers from trying to pronounce the symbol.

Use the .show-for-sr class to define screen reader-only text.

<button class="button" type="button">
  <!-- Screen readers will see "close" -->
  <span class="show-for-sr">Close</span>
  <!-- Visual users will see the X, but not the "Close" text -->
  <span aria-hidden="true"><i class="fi-x"></i></span>

Sass Reference


The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$button-padding List 0.85em 1em

Padding inside buttons.

$button-margin List 0 0 $global-margin 0

Margin around buttons.

$button-fill Keyword solid

Default fill for buttons. Can either be solid or hollow.

$button-background Color $primary-color

Default background color for buttons.

$button-background-hover Color scale-color($button-background, $lightness: -15%)

Background color on hover for buttons.

$button-color List $white

Font color for buttons.

$button-color-alt List $black

Alternative font color for buttons.

$button-radius Number $global-radius

Border radius for buttons, defaulted to global-radius.

$button-hollow-border-width Number 1px

Border width for hollow outline buttons

$button-sizes Map tiny: 0.6rem
small: 0.75rem
default: 0.9rem
large: 1.25rem

Sizes for buttons.

$button-palette Map $foundation-palette

Coloring classes. A map of classes to output in your CSS, like .secondary, .success, and so on.

$button-opacity-disabled List 0.25

opacity for a disabled button.

$button-background-hover-lightness Number -20%

Background color lightness on hover for buttons.

$button-hollow-hover-lightness Number -50%

Color lightness on hover for hollow buttons.

$button-transition List background-color 0.25s ease-out, color 0.25s ease-out

transitions for buttons.


We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.


@include button-expand($expand);

Expands a button to make it full-width.

ParameterTypeDefault ValueDescription
$expand Boolean true

Set to true to enable the expand behavior. Set to false to reverse this behavior.


@include button-style($background, $background-hover, $color);

Sets the visual style of a button.

ParameterTypeDefault ValueDescription
$background Color $button-background

Background color of the button.

$background-hover Color $button-background-hover

Background color of the button on hover. Set to auto to have the mixin automatically generate a hover color.

$color Color $button-color

Text color of the button. Set to auto to automatically generate a color based on the background color.


@include button-hollow;

Removes background fill on hover and focus for hollow buttons.


@include button-disable);

Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.


@include button-dropdown($size, $color, $offset);

Adds a dropdown arrow to a button.

ParameterTypeDefault ValueDescription
$size Number 0.4em

Size of the arrow. We recommend using an em value so the triangle scales when used inside different sizes of buttons.

$color Color white

Color of the arrow.

$offset Number $button-padding

Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.


@include button($expand, $background, $background-hover, $color, $style);

Adds all styles for a button. For more granular control over styles, use the individual button mixins.

ParameterTypeDefault ValueDescription
$expand Boolean false

Set to true to make the button full-width.

$background Color $button-background

Background color of the button.

$background-hover Color $button-background-hover

Background color of the button on hover. Set to auto to have the mixin automatically generate a hover color.

$color Color $button-color

Text color of the button. Set to auto to automatically generate a color based on the background color.

$style Keyword solid

Set to hollow to create a hollow button. The color defined in $background will be used as the primary color of the button.