Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.


Build With Predefined HTML Classes

There are two ways to build buttons in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <a>, <button> or <input> with a class of .button. This will create a default medium button. You can also use size, color and radius classes to control more of the style.

The class options:

  • The size classes include: .tiny, .small, .medium or .large
  • The color classes include: .secondary, .alert or .success
  • The radius classes include: .radius or .round
  • You can also add .disabled to any button and it will look and act disabled
<!-- Size Classes -->
<a href="#" class="button">Default Button</a>
<a href="#" class="tiny button">Tiny Button</a>
<a href="#" class="small button">Small Button</a>
<a href="#" class="large button">Large Button</a>

<!-- Color Classes -->
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Success Button</a>
<a href="#" class="button alert">Alert Button</a>

<!-- Radius Classes -->
<a href="#" class="button radius">Radius Button</a>
<a href="#" class="button round">Round Button</a>

<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>

You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the default Foundation CSS package or that you've selected button from a custom package. These should be linked up following our default HTML page structure.

Build with Mixins

We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _global.scss and _buttons.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/buttons";

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<a href="#" class="your-class-name">Button Text</a>
Quick Mixin

You can quickly build an entire button using our global mixin by including it on your custom class or ID in your stylesheet. The global mixin will create the necessary style for the button. The global mixin looks like this:

/* Using the default styles */
.your-class-name { @include button; }
Default Button

There are also six options you can customize on the fly when writing this mixin. These controls things like: background color, border color, text color, size and state. Setting any of these options to false will negate those styles.

/* Using the available options */
.your-class-name {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);

/* This controls padding around the buttons. Use a variable or em value */
$padding: $button-med

/* This controls button color. Set to one of our variables or a custom hex value */
$bg: $primary-color

/* This controls button radius. Set to a variable, true/false, or custom px value */
$radius: false

/* This whether button is full-width. Set to true or false */
$full-width: false

/* This controls whether disabled styles are used. Set to true or false */
$disabled: false

/* This controls padding for inputs, they are a little different */
$is-input: false
Custom Button
Base Mixin

You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a button base that only include structural styles.

.your-class-name { @include button-base; }
Button Base
Size Mixin

The size mixin will let you control the padding, which adjusts text size. You can also choose whether the button is full-width or an input button.

.your-class-name {
  @include button-base;
  @include button-size($padding, $full-width, $is-input);
Button Base & Size
Style Mixin

The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text, border and radius.

.your-class-name {
  @include button-base;
  @include button-size;
  @include button-style($bg, $radius, $disabled);
Button Base, Size & Style
Inset Shadow, Border Radius & Transition Mixin

Sometimes you want to add a nice fancy shine to the edge of your button. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the button a nice zero-fade.

.your-class-name {
  @include button-base;
  @include button-size;
  @include button-style;
  @include radius;
  @include single-transition;
  @include inset-shadow($active);

/* This controls whether or not you get the depressed look on tap/click. */
/* Set to true or false, defaults to true. */
$active: true
Button Base, Size, Style & Shine
Default SCSS Variables
$include-html-button-classes: $include-html-classes;

/* We use these to build padding for buttons. */
$button-med: em-calc(12);
$button-tny: em-calc(7);
$button-sml: em-calc(9);
$button-lrg: em-calc(16);

/* We use this to control the display property. */
$button-display: inline-block;
$button-margin-bottom: em-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: em-calc(16);
$button-font-tny: em-calc(11);
$button-font-sml: em-calc(13);
$button-font-lrg: em-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;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video