Button

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.

Basics

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.

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

<!-- 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>

Learn More View All Features

Sizing

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

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

So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Coloring

Give a button additional meaning by adding a coloring class, or .disabled to create a faded appearance.

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

<a class="secondary button" href="#">Secondary Color</a>
<a class="success button" href="#">Success Color</a>
<a class="alert button" href="#">Alert Color</a>
<a class="warning button" href="#">Warning Color</a>
<a class="disabled button" href="#">Disabled Button</a>

Secondary Color Success Color Alert Color Warning Color 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.

<button class="hollow button" href="#">Primary Color</button>
<button class="secondary hollow button" href="#">Secondary Color</button>
<button class="success hollow button" href="#">Success Color</button>
<button class="alert hollow button" href="#">Alert Color</button>
<button class="warning hollow button" href="#">Warning Color</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.

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

Accessibility

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 it's 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>
</button>

Sass Reference

Variables

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

Name	Type	Default Value	Description
`$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`	Font color for buttons, if the background is light.
`$button-radius`	Number	`$global-radius`	Border radius for buttons, defaulted to global-radius.
`$button-sizes`	Map	`tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem`	Sizes for buttons.
`$button-opacity-disabled`	List	`0.25`	opacity for a disabled button.

Mixins

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.

button-expand

@include button-expand($expand);

Expands a button to make it full-width.

Parameter	Type	Default Value	Description
`$expand`	Boolean	`true`	Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.

button-style

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

Sets the visual style of a button.

Parameter	Type	Default Value	Description
`$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.

button-hollow

@include button-hollow;

Removes background fill on hover and focus for hollow buttons.

button-disabled

@include button-disabled;

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.

Parameter	Type	Default Value	Description
`$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.

button

@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.

Parameter	Type	Default Value	Description
`$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.

Button

Basics

Sizing

Coloring

Hollow Style

Accessibility

Sass Reference

Variables

Mixins

button-expand

button-style

button-hollow

button-disabled

button

Let's build something amazing.

Foundation for Sites

Want more?

Talk to us

Stay Updated

Basics

Sizing

Coloring

Hollow Style

Dropdown Arrows

Accessibility

Sass Reference

Variables

Mixins

button-expand

button-style

button-hollow

button-disabled

button-dropdown

button

Let's build something amazing.

Stay on top of what’s happening in responsive design.

Foundation for Sites

Want more?

Talk to us

Stay Updated