--- title: Buttons layout: doc/layouts/default.html --- # Buttons

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.

*** {{> examples_buttons_basic}} *** ## Basic You can create a button using minimal markup.

HTML

{{#markdown}} ```html {{> examples_buttons_basic_rendered}} ``` {{/markdown}}

Rendered HTML

{{> examples_buttons_basic}}
*** ## Advanced Additional classes can be added to your component to change its appearance.

HTML

{{#markdown}} ```html {{> examples_buttons_advanced_rendered}} ``` {{/markdown}}

Rendered HTML

{{> examples_buttons_advanced}}
*** ## 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"; ```