---
title: Buttons
layout: doc/layouts/default.html
---
# Buttons
***
{{> examples_buttons_basic}}
***
## Basic
You can create a button using minimal markup.
HTML
{{#markdown}}
```html
{{> examples_buttons_basic}}
```
{{/markdown}}
Rendered HTML
{{> examples_buttons_basic_rendered}}
***
## Advanced
Additional classes can be added to your component to change its appearance.
HTML
{{#markdown}}
```html
{{> examples_buttons_advanced}}
```
{{/markdown}}
Rendered HTML
{{> examples_buttons_advanced_rendered}}
***
## Customize With Sass
Buttons can be easily customized using our Sass variables
{{> examples_buttons_variables}}
***
## Semantic Markup With Sass
You can create your own buttons using our Sass mixins.
### Basic
You can use the `button()` mixin like so:
SCSS
{{> examples_buttons_default_mixin}}
HTML
{{#markdown}}
```html
...
```
{{/markdown}}
### Advanced
You can further customize your buttons:
#### SCSS
{{> examples_buttons_custom_mixin}}
#### HTML
{{#markdown}}
```html
...
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/buttons";
```