--- 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
*** ### Basic HTML You can create buttons with this basic HTML
```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
### Customize with Sass Buttons can be easily customized using our Sass variables.
		  
$include-html-button-classes: $include-html-classes;

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

// We use this to control the display property.
$button-display: inline-block;
$button-margin-bottom: rem-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: rem-calc(16);
$button-font-tny: rem-calc(11);
$button-font-sml: rem-calc(13);
$button-font-lrg: rem-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 and cursor for disabled buttons.
$button-disabled-opacity: 0.6;
$button-disabled-cursor: $cursor-default-value;