Buttons

Available Sass Variables and default values

$button-primary-color: $wt
$button-secondary-color: $wt
$button-tertiary-color: $wt
$button-contrast-color: $wt
$button-highlight-color: $wt

$button-primary-color-hover: $wt
$button-secondary-color-hover: $wt
$button-tertiary-color-hover: $wt
$button-contrast-color-hover: $wt
$button-highlight-color-hover: $wt

$button-outline-background-color: $wt
$button-outline-color: $text-color

$button-border-color-darken-percent: 0%
$button-background-darken-percent-hover: 5%
$button-background-darken-percent-active: 10%

$button-text-link-color: $text-color-light
$button-text-link-color-hover: $text-color-dark

$button-border-radius: $base-border-radius
$button-font-size: $font-size
$button-padding: 10px 15px
$button-large-padding: 15px 22.5px
$button-small-padding: 5px 7.5px

Examples

Normal Buttons

a.btn-primary Primary Button
a.btn-secondary Secondary Button
a.btn-tertiary Tertiary Button
a.btn-contrast Contrast Button
a.btn-highlight Highlight Button
Primary Button
Secondary Button
Tertiary Button
Contrast Button
Highlight Button

Disabled Buttons

a.btn-primary disabled="disabled" Primary Button
a.btn-secondary disabled="disabled" Secondary Button
a.btn-tertiary disabled="disabled" Tertiary Button
a.btn-contrast disabled="disabled" Contrast Button
a.btn-highlight disabled="disabled" Highlight Button
Disabled Primary Button
Disabled Secondary Button
Disabled Tertiary Button
Disabled Contrast Button
Disabled Highlight Button

Sized Buttons

a.btn-primary.btn-large Primary Button
a.btn-secondary.btn-small Secondary Button
With '.btn-large'
With '.btn-small'

Outlined Buttons

a.btn-outline Default Outline
a.btn-outline.btn-primary Primary Button
a.btn-outline.btn-secondary Secondary Button
a.btn-outline.btn-tertiary Tertiary Button
a.btn-outline.btn-contrast Contrast Button
a.btn-outline.btn-highlight Highlight Button
Default Outline
Primary Button
Secondary Button
Tertiary Button
Contrast Button
Highlight Button

Text Buttons

a.btn-text Cancel

An anchor with `.btn-text` will be the same size as a button, but appear as text (useful for 'cancel' buttons)

Make it soCancel