<%= @page_title %>

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.

.large.button.expand

---

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

<%= code_example ' Default Button Tiny Button Small Button Large Button Secondary Button Success Button Alert Button Radius Button Round Button Disabled Button ', :html %>

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:

<%= code_example ' @import "foundation/variables"; @import "foundation/components/global"; @import "foundation/components/buttons"; ', :css %>

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:

<%= code_example ' Button Text ', :html %>

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:

<%= code_example ' /* Using the default styles */ .your-class-name { @include button; } ', :css %> 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.

<%= code_example ' /* 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 ', :css %> 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.

<%= code_example ' .your-class-name { @include button-base; } ', :css %> 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.

<%= code_example ' .your-class-name { @include button-base; @include button-size($padding, $full-width, $is-input); } ', :css %> 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.

<%= code_example ' .your-class-name { @include button-base; @include button-size; @include button-style($bg, $radius, $disabled); } ', :css %> 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.

<%= code_example ' .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 ', :css %> Button Base, Size, Style & Shine

Default SCSS Variables

<%= code_example ' $include-html-button-classes: $include-html-classes; /* We use these to build padding for buttons. */ $button-med: emCalc(12); $button-tny: emCalc(7); $button-sml: emCalc(9); $button-lrg: emCalc(16); /* We use this to control the display property. */ $button-display: inline-block; $button-margin-bottom: emCalc(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: emCalc(16); $button-font-tny: emCalc(11); $button-font-sml: emCalc(13); $button-font-lrg: emCalc(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; ', :css %>

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