button example 3: variables, extend, edited classes Get Sassy talk examples for Thunder Plains Conf 11/7/13

3-buttons-extend-variables.scss

// Variables
$black: #000000;
$greydark: lighten($black,28%); // #424242
$greymedium: lighten($black,40.75%); // #686868
$greylight: lighten($black,68%); // #adadad
$greypale: lighten($black,80%); // #cccccc
$white: #ffffff;

// Site colors
$turquoise: darken(rgb(97,210,214),20%);
$purple: #993399;

// Primary Buttons (Submit)
$button_primary_background: $turquoise;
$button_primary_color: lighten($button_primary_background,45%);

// Call to Action Button (Sign Up!)
$button_calltoaction_background: #237cbe;
$button_calltoaction_color: $white;

// Secondary Buttons (Edit)
$button_secondary_background: #993399;
$button_secondary_color: rgb(213,121,204);

// Tertiary
$button_tertiary_background: #e6475b;
$button_tertiary_color: $white;

// Disabled - appends to and overrides any other button style!
$button_disabled_background: $greylight;
$button_disabled_color: $greydark;

// Text Only Button (Cancel)
$button_textonly_background: transparent;
$button_textonly_color: $greydark;



$button_font_large: 32px;
$button_font_medium: 24px;
$button_font_small: 16px;



%button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 20px 0 0;
    padding: .25em 1em;
    border-radius: 4px;
    font-family: "Pluto Sans", sans-serif;
    letter-spacing: 1px;
    font-size: 24px;
    line-height: 2.6;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

/* Button Types */

// Primary button: for the most important action
.button_primary {
    @extend %button;
    color: $button_primary_color;
    background-color: $button_primary_background;
    box-shadow: 0px 8px 0px 0px transparentize($button_primary_background,.75);
    border-right: 1px solid darken($button_primary_background,10%);
    border-bottom: 1px solid darken($button_primary_background,10%);
    text-shadow: 0px 1px 1px darken($button_primary_background,30%);
    
    &:hover,
    &:active,
    &:focus {
        background: darken($button_primary_background,10%);
    }

}

// Call to Action buttons - for large, highlighted calls to action
.button_calltoaction {
    @extend %button;
    color: $button_calltoaction_color;
    background-color: $button_calltoaction_background;
    box-shadow: 0px 8px 0px 0px transparentize($button_calltoaction_background,.75);
    border-right: 1px solid darken($button_calltoaction_background,10%);
    border-bottom: 1px solid darken($button_calltoaction_background,10%);
    text-shadow: 0px 1px 1px darken($button_calltoaction_background,30%);
    
    &:hover,
    &:active,
    &:focus {
        background: darken($button_calltoaction_background,10%);
    }

}

// Secondary buttons -- for secondary actions
.button_secondary {
    @extend %button;
    color: $button_secondary_color;
    background-color: $button_secondary_background;
    box-shadow: 0px 8px 0px 0px transparentize($button_secondary_background,.75);
    border-right: 1px solid darken($button_secondary_background,10%);
    border-bottom: 1px solid darken($button_secondary_background,10%);
    text-shadow: 0px 1px 1px darken($button_secondary_background,30%);
    
    &:hover,
    &:active,
    &:focus {
        background: darken($button_secondary_background,10%);
    }

}

// Disabled button state - can apply to other button
.button_disabled {
    @extend %button;
    color: $button_disabled_color;
    background-color: $button_disabled_background;
    cursor: default;
    // disabled state needs to have no shadow effects so it can apply to any button
    box-shadow: none;
    border-color: transparent;
    text-shadow: none;
    
    &:hover,
    &:active,
    &:focus {
        background-color: $button_disabled_background;
        color: $button_disabled_color;
    }
}

// Tertiary button -- in this case, for delete, third actions
.button_tertiary {
    @extend %button;
    color: $button_tertiary_color;
    background-color: $button_tertiary_background;
    box-shadow: 0px 8px 0px 0px transparentize($button_tertiary_background,.75);
    border-right: 1px solid darken($button_tertiary_background,10%);
    border-bottom: 1px solid darken($button_tertiary_background,10%);
    text-shadow: 0px 1px 1px darken($button_tertiary_background,30%);
    
    &:hover,
    &:active,
    &:focus {
        background: darken($button_tertiary_background,10%);
    }
}

// Text Only buttons - for Cancel, small Edit links, etc
.button_textonly {
    @extend %button;
    color: $button_textonly_color;
    font-size: .8em;
    text-transform: capitalize;
    
    &:hover,
    &:active,
    &:focus {
        color: darken($button_textonly_color,10%);
    }

    &.button_disabled {
        background: none;
        color: $button_textonly_color;
    }
}

buttons_new.html

<!-- Example of multiple buttons across different HTML files/locations, with new classnames -->

<!-- .save_button is now: -->
<a class="button_primary" id="button_save_form">Save</a>

<!-- .sign_up_button is now: -->
<a class="button_calltoaction" id="button_signup">Sign Up!</a>

<!-- .button-edit is now: -->
<a class="button_secondary" id="button_edit_profile">Edit</a>

<!-- .button-disabled is now: -->
<a class="button_secondary button_disabled" id="button_edit_profile">Edit</a>

<!-- .button_delete is now: -->
<a class="button_tertiary" id="button_delete_comment">Delete</a>

<!-- .cancel_button_link is now: -->
<a class="button_textonly" id="button_cancel_comment">Cancel</a>

output.css

.button_primary, .button_calltoaction, .button_secondary, .button_disabled, .button_tertiary, .button_textonly {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 20px 0 0;
  padding: .25em 1em;
  border-radius: 4px;
  font-family: "Pluto Sans", sans-serif;
  letter-spacing: 1px;
  font-size: 24px;
  line-height: 2.6;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* Button Types */
.button_primary {
  color: #c6eff0;
  background-color: #2ba2a6;
  box-shadow: 0px 8px 0px 0px rgba(43, 162, 166, 0.25);
  border-right: 1px solid #217a7d;
  border-bottom: 1px solid #217a7d;
  text-shadow: 0px 1px 1px #0c2b2c;
}
.button_primary:hover, .button_primary:active, .button_primary:focus {
  background: #217a7d;
}

.button_calltoaction {
  color: white;
  background-color: #237cbe;
  box-shadow: 0px 8px 0px 0px rgba(35, 124, 190, 0.25);
  border-right: 1px solid #1b6093;
  border-bottom: 1px solid #1b6093;
  text-shadow: 0px 1px 1px #0b283d;
}
.button_calltoaction:hover, .button_calltoaction:active, .button_calltoaction:focus {
  background: #1b6093;
}

.button_secondary {
  color: #d579cc;
  background-color: #993399;
  box-shadow: 0px 8px 0px 0px rgba(153, 51, 153, 0.25);
  border-right: 1px solid #732673;
  border-bottom: 1px solid #732673;
  text-shadow: 0px 1px 1px #260d26;
}
.button_secondary:hover, .button_secondary:active, .button_secondary:focus {
  background: #732673;
}

.button_disabled {
  color: #474747;
  background-color: #adadad;
  cursor: default;
  box-shadow: none;
  border-color: transparent;
  text-shadow: none;
}
.button_disabled:hover, .button_disabled:active, .button_disabled:focus {
  background-color: #adadad;
  color: #474747;
}

.button_tertiary {
  color: white;
  background-color: #e6475b;
  box-shadow: 0px 8px 0px 0px rgba(230, 71, 91, 0.25);
  border-right: 1px solid #dc1e36;
  border-bottom: 1px solid #dc1e36;
  text-shadow: 0px 1px 1px #821220;
}
.button_tertiary:hover, .button_tertiary:active, .button_tertiary:focus {
  background: #dc1e36;
}

.button_textonly {
  color: #474747;
  font-size: .8em;
  text-transform: capitalize;
}
.button_textonly:hover, .button_textonly:active, .button_textonly:focus {
  color: #2e2e2e;
}
.button_textonly.button_disabled {
  background: none;
  color: #474747;
}