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

Basic HTML

You can create buttons with this basic HTML

Default Button
Default Button

Colors

You can create buttons of various colors with these classes:

<!-- Color Classes --> Primary Color Secondary Color Success Color Alert Color Warning Color
Primary Color Secondary Color Success Color Alert Color Warning Color

Sizes

You can customize button sizing with these classes:

<!-- Size Classes --> 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 pointer & hover state, while also changing the color.

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

Buttons can be turned into button groups which strings buttons together.

Button Group Sizing & colors

Button groups can have sizing modifiers applied straight to the ul.

Button Group Segmented

Button groups can have a segmented look with an active class applied.


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 $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.

$button-padding: 0.85em 1em; $button-margin: 0 $global-padding $global-padding 0; $button-style: solid; $button-background: $primary-color; $button-color: auto; $button-radius: 0; $button-sizes: ( tiny: 0.7, small: 0.8, medium: 1, large: 1.3, ); $button-font-size: 0.9rem; $button-opacity-disabled: 0.8; $button-tag-selector: true; $btngroup-background: $primary-color; $btngroup-color: #fff; $btngroup-radius: $button-radius;