Rendered HTML

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.

Rendered HTML

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

<ahref="#"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

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

Sass Errors?

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