Configuring Buttons

Slate has four kinds of buttons already setup and ready to rock. These are general purpose, positive, negative, and gradient buttons.

These are explained in greater detail here, but to make them look good you need to adjust the variables in the config/_config-buttons.scssfile. They are quite big, but quite self-explanatory, so we won't list them all here.

$button-default: (

  use-borders: true,

  default: $primary,
  hover: darken($primary, 15%),
  focus: darken($primary, 20%),
  active: darken($primary, 10%),
  disabled: $disabled,

  font-family: inherit,
  textlight: $bright,
  textdark: $dark,
  textweight: $semibold,
  font-size: $base-font-size,
  textalign: center,
  text-transform: uppercase,

  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: 44px,
  margin: 0 0 24px 0,
  padding: 0 8px,
  rounded: 0,

  display: inline-block,
  boxsizing: content-box

);