--- title: Button description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs. video: iEAtuFk4-LQ sass: scss/components/_button.scss tags: - dropdown button ---

To help you get the most out of Foundation and create responsive websites and apps like us we’ve put together some unique online webinar training. Learn Foundation’s Grid, how to use and modify Foundation's UI components, Foundation’s JavaScript options and functions, and tons of tips and tricks we learned from major client projects.

## Basics A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag. - Use the `` tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work. - Use the ` ``` --- ## Sizing Additional classes can be added to your button to change its size and shape.

Watch this part in video

```html_example So Tiny So Small So Basic So Large Such Expand Wow, Small Expand ``` ### Responsive Expanded buttons If you are using the Sass version, you can activate these additional responsive button expand classes by changing the `$button-responsive-expanded` variable to true. (It is false by default to reduce CSS file size.) For CSS download users, you can [get the CSS here](https://gist.github.com/rafibomb/2497ca75ceedfa3f5ccf3ba146eae295) and add it to your stylesheet. ```html_example Wow, Expand only on small viewport Expand only on medium viewport Expand only on large viewport Wow, Expand on medium and larger Expand on large and larger Expand on medium and smaller Expand on large and smaller ``` --- ## Coloring Add color classes to give buttons additional meaning.

Watch this part in video

```html_example Primary Secondary Success Alert Warning ``` --- ### Custom Colors If you're using the Sass version of Foundation, you can customize the button classes by editing the `$button-palette` map in your settings file. The button palette defaults to `$foundation-palette`. If you don't need certain colors from the default palette, simply remove them from the list. ```scss $button-palette: map-remove($foundation-palette, ( primary, secondary )) !default; ``` Or you can add more colors to the default palette. ```scss $button-palette: map-merge($foundation-palette, ( purple: #bb00ff )) !default; ``` Or you can define your own custom button palette. ```scss $button-palette: ( black: #000000, red: #ff0000, purple: #bb00ff ) !default; ``` --- ### Text Colors The text color for each button class is determined by either `$button-color` or `$button-color-alt`, whichever settings variable has more contrast.

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value — but know that doing so may decrease accessibility.

--- ## Hollow Style Add the `.hollow` class to a button to give it a hollow style. Change the `$button-fill` variable in your settings file to `hollow` to make this the default style. Changing this setting will remove the `.hollow` class from your CSS. ```html_example ``` --- ## Disabled Buttons The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For ` ``` Alternatively, you can also use disabled hollow buttons. ```html_example Disabled ``` --- ## Clear Style Add the `.clear` class to a button to give it a clear style. Change the `$button-fill` variable in your settings file to `clear` to make this the default style. Changing this setting will remove the `.clear` class from your CSS.

Watch this part in video

```html_example Primary Secondary Success Alert Warning Disabled ```

This is especially useful as a secondary action button. This way you get proper spacing and line-height. Example:

--- ## Dropdown Arrows Add a dropdown arrow to your button with the `.dropdown` class.

This doesn't add dropdown functionality automatically. To do that, you can attach our Dropdown plugin.

```html_example ``` --- ## Accessibility Make sure that the text of the button is descriptive. If for some reason, your button contains no readable text (for example, just a symbol or icon), add screen reader-only text to the button to clarify its purpose. The symbol or icon should be wrapped in an element with the attribute `aria-hidden="true"`, to prevent screen readers from trying to pronounce the symbol. Use the `.show-for-sr` class to define screen reader-only text. ```html_example ```