Generated by SassMeister.com.

SassMeister-input-HTML.html

<button class="button_primary">Post</button>
<button class="button_primary button_disabled">Approve</button>
<button class="button_secondary">Edit</button>
<button class="button_tertiary">Cancel</button>
<button class="button_text">Unsubscribe</button>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// -------------------------------------------------------------- //
// DEFAULT COLORS ----------------------------------------------- //
// -------------------------------------------------------------- //

$black: #000000 !default
$greydark: #464646 !default
$greymedium: #686868 !default
$grey: #9d9d9d !default
$greylight: #adadad !default
$greypale: #cccccc !default
$greypalest: #e9e9e9 !default
$silver: #f9f9f9 !default
$white: #ffffff !default
$red: #C02028 !default

$alert: #0099cc !default
$error: darken($red,20%) !default
$success: #81a635 !default


// -------------------------------------------------------------- //
// THEME COLORS ------------------------------------------------- //
// -------------------------------------------------------------- //
// These can/should be overridden in theme-[CLIENT].sass

 // main brand color
$primary_color_bright: #0099cc !default
// darker version for hover
$primary_color_dark: darken($primary_color_bright,10%) !default

// bright, provide significant contrast to primary color
$highlight_color_bright: $red !default
$highlight_color_dark: darken($highlight_color_bright,10%) !default

// tertiary color, typically grey
$tertiary_color: $greylight !default




// -------------------------------------------------------------- //
// TYPOGRAPHY --------------------------------------------------- //
// -------------------------------------------------------------- //

$fontPrimary: "Proxima Nova", "proxima-nova", Helvetica, Arial, sans-serif !default


// -------------------------------------------------------------- //
// BUTTON COLORS  ----------------------------------------------- //
// -------------------------------------------------------------- //

$button_bg_primary: $primary_color_bright
$button_border_primary: $primary_color_bright
$button_text_primary: $white
$button_border_hover_primary: $primary_color_dark
$button_bg_hover_primary: $primary_color_dark

$button_bg_secondary: $highlight_color_bright
$button_border_secondary: $highlight_color_bright
$button_text_secondary: $white
$button_border_hover_secondary: $highlight_color_dark
$button_bg_hover_secondary: $highlight_color_dark

$button_bg_disabled: $grey
$button_border_disabled: $grey
$button_text_disabled: $greymedium
$button_bg_hover_disabled: $grey



// -------------------------------------------------------------- //
// FONT SIZES  -------------------------------------------------- //
// -------------------------------------------------------------- //

// to use: .page_title { @extend %alpha; }

h1, %alpha
    font-size: 32px
    font-size: 2em // 32px (target size) / 16px (contextual size) = 2em

h2, %beta
    font-size: 30px
    font-size: 1.875em // 30px / 16px = 1.875em

h3, %gamma
    font-size: 22px
    font-size: 1.375em // 22px

h5, %delta
    font-size: 18px
    font-size: 1.125em // 18px

p, %body_copy // changing from naming convention for ease of understanding
    font-size: 16px
    font-size: 1em // 16px, browser default

small, %zeta
    font-size: 12px
    font-size: 0.75em // 12px


/* ---------------------------------------------------------------- */
/* BUTTONS -------------------------------------------------------- */
/* ---------------------------------------------------------------- */


%button
    display: inline-block
    padding: 10px 14px
    border: 1px solid transparent
    margin-right: 10px
    cursor: pointer
    font-weight: 600
    text-transform: uppercase
    font-family: $fontPrimary
    @extend %zeta


// ---------------------------------------------------------------- //
// BUTTON TYPES --------------------------------------------------- //
// ---------------------------------------------------------------- //

// PRIMARY BUTTON -- default, e.g. submit, save
.button_primary
    @extend %button
    background: $button_bg_primary
    border-color: $button_border_primary
    color: $button_text_primary

    &:hover,
    &:focus
        color: $button_text_primary
        background: $button_bg_hover_primary
        border-color: $button_border_hover_primary

// SECONDARY BUTTON -- e.g. cancel
.button_secondary
    @extend %button
    background: $button_bg_secondary
    border-color: $button_border_secondary
    color: $button_text_secondary

    &:hover,
    &:focus
        color: $button_text_secondary
        background: $button_bg_hover_secondary
        border-color: $button_border_hover_secondary

// TERTIARY BUTTON
.button_tertiary
    @extend %button
    background: $button_bg_disabled
    border-color: $button_border_disabled
    color: $button_text_secondary

    &:hover,
    &:focus
        color: $button_text_secondary
        background: $button_text_disabled
        border-color: $button_text_disabled

// DISABLED BUTTON
.button_disabled
    @extend %button
    background: $button_bg_disabled
    border-color: $button_border_disabled
    color: $button_text_disabled
    pointer-events: none
    opacity: .75

    &:hover,
    &:focus
        color: $button_text_disabled
        background: $button_bg_hover_disabled

// TEXT-ONLY "BUTTON" LINK
.button_text
    @extend %button
    padding: 0
    border: 0
    background: 0
    cursor: pointer
    font-weight: normal
    text-transform: none
    @extend %zeta

    &:hover,
    &:focus
        color: $greymedium

SassMeister-output.css

h1 {
  font-size: 32px;
  font-size: 2em;
}

h2 {
  font-size: 30px;
  font-size: 1.875em;
}

h3 {
  font-size: 22px;
  font-size: 1.375em;
}

h5 {
  font-size: 18px;
  font-size: 1.125em;
}

p {
  font-size: 16px;
  font-size: 1em;
}

small, .button_primary, .button_secondary, .button_tertiary, .button_disabled, .button_text {
  font-size: 12px;
  font-size: 0.75em;
}

/* ---------------------------------------------------------------- */
/* BUTTONS -------------------------------------------------------- */
/* ---------------------------------------------------------------- */
.button_primary, .button_secondary, .button_tertiary, .button_disabled, .button_text {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid transparent;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Proxima Nova", "proxima-nova", Helvetica, Arial, sans-serif;
}

.button_primary {
  background: #0099cc;
  border-color: #0099cc;
  color: white;
}
.button_primary:hover, .button_primary:focus {
  color: white;
  background: #007399;
  border-color: #007399;
}

.button_secondary {
  background: #c02028;
  border-color: #c02028;
  color: white;
}
.button_secondary:hover, .button_secondary:focus {
  color: white;
  background: #94191f;
  border-color: #94191f;
}

.button_tertiary {
  background: #9d9d9d;
  border-color: #9d9d9d;
  color: white;
}
.button_tertiary:hover, .button_tertiary:focus {
  color: white;
  background: #686868;
  border-color: #686868;
}

.button_disabled {
  background: #9d9d9d;
  border-color: #9d9d9d;
  color: #686868;
  pointer-events: none;
  opacity: 0.75;
}
.button_disabled:hover, .button_disabled:focus {
  color: #686868;
  background: #9d9d9d;
}

.button_text {
  padding: 0;
  border: 0;
  background: 0;
  cursor: pointer;
  font-weight: normal;
  text-transform: none;
}
.button_text:hover, .button_text:focus {
  color: #686868;
}

SassMeister-rendered.html

<button class="button_primary">Post</button>
<button class="button_primary button_disabled">Approve</button>
<button class="button_secondary">Edit</button>
<button class="button_tertiary">Cancel</button>
<button class="button_text">Unsubscribe</button>