--- name: button url: /button title: Button ---

Button

Get more control with our buttons. Foundation has many easy to use button styles that you can customize or override to fit your needs.


Default Button Secondary Button Success Button Alert Button Warning Button Info Button Dark Button

Basic HTML

A button is just an anchor tag with the button class. By setting the $button-tag-selector variable to true, plain <button> tags can be styled as buttons as well.

Default Button
Default Button

Colors

Give buttons more semantic meaning with our built-in coloring classes.

Primary Color Secondary Color Success Color Alert Color Warning Color Info Color Dark Color
Primary Color Secondary Color Success Color Alert Color Warning Color Info Color Dark Color

Sizes

Use these classes to change the size of a button.

Tiny Button Small Button Default Button Large Button Expand Button
Tiny Button
Small Button
Default Button
Large Button
Expand Button

Disabled Button

Adding a class of disabled will disable the hover state, and add a faded appearance.

Disabled Button
Disabled Button

Hollow Buttons

Buttons can be converted to a hollow style with the hollow class. All of the same coloring and sizing classes will work with it.

Hollow Button Hollow Alert Button Hollow Success Button
Hollow Button Hollow Alert Button Hollow Success Button

Button Groups

A button group is a series of buttons.

Button Group Sizing & Coloring

The same coloring and sizing classes for buttons can be used with button groups as well.

By default, the items of a button group will stack to the left. They can also expand out, so the button group becomes full-width, and each button becomes equal-width. To enable this behavior, add the class expand to the button group container.

Individual buttons in the group can be styled with coloring classes, or the disabled class.

Segmented Button Group

The segmented class will give buttons a hollow look. Add an is-active class to an <li> in the button group to fill it in.

Input Groups

A series of radio inputs can be transformed into a segmented button group.


Sass Variables

Write a custom button class using our button mixins.

.custom-button { // Extend the base selector to get core styles @extend %button; // Use the size mixin to set a size @include button-size( $size: medium, // tiny, small, medium, or large $expand: false ); // Use the style mixin to set visual styles @include button-style( $background: #fff, // Background color $background-hover: #fff, // Background color on hover. Use "auto" to generate automatically $color: #000, // Text color $style: solid // Can be solid or hollow ); &.custom-disabled { @include button-disabled; } }

Sass Mixins

Buttons can be easily customized using our Sass variables.