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.

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

Button Sizing

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

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

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

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.

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

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,
    // Background color. We can set $bg:false for a transparent background. 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
  );
}

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";