--- name: button url: /button ---

Button

Get more controll 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 Hollow Button Alert Hollow 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

Size

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

Button Groups

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

Disabled Button

Button Group Sizing & colors

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

Button Group Segmented

Button groups can have a segemented 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 !default; $button-margin: 0 $global-padding $global-padding 0 !default; $button-style: solid !default; $button-background: $primary-color !default; $button-color: auto !default; $button-radius: 0 !default; $button-sizes: ( tiny: 0.7, small: 0.8, medium: 1, large: 1.3, ) !default; $button-font-size: 0.9rem !default; $button-opacity-disabled: 0.8 !default; $button-tag-selector: true !default; $btngroup-background: $primary-color !default; $btngroup-color: #fff !default; $btngroup-radius: $button-radius !default;