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.


Default Button


Basic

You can create a button using minimal markup.

HTML

<a href="#" class="button">Default Button</a>

Rendered HTML

.button

Advanced

Additional classes can be added to your component to change its appearance.

HTML

<!-- Size Classes --> <a href="#" class="button [tiny small large]">Default Button</a> <!-- Color Classes --> <a href="#" class="button [secondary success alert]">Color Button</a> <!-- Radius Classes --> <a href="#" class="button [radius round]">Radius Button</a> <!-- Disabled Class --> <a href="#" class="button disabled">Disabled Button</a> <!-- Expand Class --> <a href="#" class="button expand">Expanded Button</a>


Accessibility

Use the snippet below to make buttons more accessible. You can use an aria-label="submit form" attribute to give a screen reader the literal purpose of the button if there is no text in it. If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable.

HTML

<a role="button" href="#" class="button">Default Button</a> <a role="button" aria-label="submit form" href="#" class="button">Submit</a> <div role="button" tabindex="0" class="button">Default Button</div>

Rendered HTML

Default Button Submit
Default Button

Customize with Sass

Buttons can be easily customized using our Sass variables

$include-html-button-classes: $include-html-classes; // We use these to build padding for buttons. $button-med: rem-calc(12); $button-tny: rem-calc(7); $button-sml: rem-calc(9); $button-lrg: rem-calc(16); // We use this to control the display property. $button-display: inline-block; $button-margin-bottom: rem-calc(20); // We use these to control button text styles. $button-font-family: inherit; $button-font-color: #fff; $button-font-color-alt: #333; $button-font-med: rem-calc(16); $button-font-tny: rem-calc(11); $button-font-sml: rem-calc(13); $button-font-lrg: rem-calc(20); $button-font-weight: bold; $button-font-align: center; // We use these to control various hover effects. $button-function-factor: 10%; // We use these to control button border styles. $button-border-width: 1px; $button-border-style: solid; // We use this to set the default radius used throughout the core. $button-radius: $global-radius; $button-round: $global-rounded; // We use this to set default opacity and cursor for disabled buttons. $button-disabled-opacity: 0.6; $button-disabled-cursor: $cursor-default-value;

Semantic Markup With Sass

You can create your own buttons using our Sass mixins.

Basic

You can use the button() mixin like so:

SCSS

// Using the default styles .custom-button-class { @include button; }

HTML

<a href="#" class="custom-button-class">...</a>

Advanced

You can further customize your buttons:

SCSS

// Using the available options .custom-button-class { @include button( // $padding - Used to build padding for buttons Default: $button-med or rem-calc(12) $padding, // Primary color set in settings file. Default: $primary-color. $bg, // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false. $radius, // We can set $full-width:true to remove side padding extend width. Default:false $full-width, // We can set $disabled:true to create a disabled transparent button. Default:false $disabled, // $is-input - <input>s and <button>s take on strange padding. We added this to help fix that. Default:false $is-input ); }

HTML

<a href="#" class="custom-button-class">...</a>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/buttons";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »