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.

.button

Basic

You can create a button using minimal markup.

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

Advanced

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

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

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 for disabled buttons.
$button-disabled-opacity: 0.6;

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, $bg, $radius, $full-width, $disabled, $is-input);
}

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

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