Slate contains a mixin for making flat buttons. More will be added for other types of buttons, but for now this gives you a good base to build on:

.btn {
 @include button;
}

This results in the following set of buttons, using inputs, links, and button elements. The colors and states can all be controlled in the config:

<input type="submit" value="Input" class="button">
<button class="button">Button</button>
<a href="#" class="button">Anchor</a>
<input type="submit" value="Disabled Input" class="button" disabled>

Button Anchor

Customising Color & Scale

The _config-buttons file contains a number of variables to change the look of buttons on a global basis. That's fine if thats what you want, but what if you need a spefic button to be a different size or color?

Slates buttons use a color map in the config to allow you to quickly setup button styles. To make your own button, you can simply clone this variable map, rename it and then set that as a parameter on the button mixin:

$button-custom: (

  use-borders: false,

  default: $tertiary,
  hover: darken($tertiary, 20%),
  focus: darken($tertiary, 20%),
  active: darken($tertiary, 20%),
  disabled: $disabled,

  font-family: $georgia,
  textlight: $bright,
  textdark: $dark,
  textweight: $semibold,
  font-size: 18px,
  textalign: center,
  text-transform: capitalize,

  border-width: 2px 2px 2px 2px,
  border-style: solid,
  border-color: $gray,
  border-hover-color: $dark,
  border-focus-color: $dark,
  border-disabled-color: darken($disabled, 20%),

  height: calc(54px - 4px),
  margin: 0 0 0 0,
  padding: 0 16px,
  rounded: 4px 0 4px 0,

  display: inline-block,
  boxsizing: content-box

);

.btn-custom {
  @include button($button-custom);
}

Then apply it to your button:

A mighty button