button example 4: with mixin Get Sassy talk examples for Thunder Plains Conf 11/7/13

3-buttons-mixin.scss

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


// variables
$white: #fff;
$black: #000;
$greydark: lighten($black,50%);
$greylight: lighten($black,80%);

$green: #9bc33f;
$turquoise: darken(rgb(97,210,214),20%);
$blue: #237cbe;
$lavender: rgb(213,121,204);
$purple: #993399;
$coral: #e6475b;
$tangerine: #ff753e;
$red: rgb(249,56,49); // e6475b

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

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

// Secondary Buttons (Edit)
$button_secondary_background: $purple;
$button_secondary_color: $lavender;

// Tertiary
$button_tertiary_background: $coral;
$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 {
    box-sizing: border-box;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-family: "Pluto Sans", sans-serif;
    font-size: $button_font_medium;
    line-height: 2.6;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0 20px 0 0;
    padding: .25em 1em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
}

@mixin button($text-color, $bg-color, $if-disabled) {
    @extend %button;
    color: $text-color;
    background-color: $bg-color;
    @if $if-disabled == false {
        box-shadow: 0px 8px 0px 0px transparentize($bg-color,.75);
        border-right: 1px solid darken($bg-color,10%);
        border-bottom: 1px solid darken($bg-color,10%);
        text-shadow: 0px 1px 1px darken($bg-color,30%);
    }
    @else if $if-disabled == true {
        // including these because button_disabled is _added_ to classes, instead of toggled, so the primary/secondary/etc styles still apply, so we have to remove them
        box-shadow: none;
        border: 0;
        text-shadow: none;
    }
    &:active, &:hover {
        background-color: darken($bg-color,10%);
    }
}
// to use: @include button($white,$coral);

/* Button Types */

.button_primary {
	@include button($button_primary_color,$button_primary_background,false); // grab all the above styles
}

.button_calltoaction {
    // @extend .button_primary; // you could also do this, if you wanted, but check the difference in the output
    @include button($button_calltoaction_color,$button_calltoaction_background,false);
    font-size: $button_font_large; // bigger font size!
}

.button_secondary {
    @include button($button_secondary_color,$button_secondary_background,false);
}

.button_tertiary {
    @include button($button_tertiary_color,$button_tertiary_background,false);
}

.button_disabled {
    @include button($button_disabled_color,$button_disabled_background,true);
	cursor: default; // remove cursor
}

.button_textonly {
    @include button($button_textonly_color,$button_textonly_background,true);
    font-size: $button_font_small; // smaller font size
	text-transform: none; // not uppercase
}

buttons_new.html

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

<!-- button_primary -->
<a href="#" class="button_primary">Save</a>

<!-- button_calltoaction is button_primary style + color + larger font size -->
<a href="#" class="button_calltoaction">Sign Up!</a>

<!-- button_secondary -->
<a href="#" class="button_secondary">Edit</a>

<!-- toggle button_disabled class with button_secondary -->
<a href="#" class="button_secondary button_disabled">Edit</a>

<!-- button_tertiary - delete, error type buttons -->
<a href="#" class="button_tertiary">Delete</a>

<!-- button_textonly - for cancel buttons everywhere! -->
<a href="#" class="button_textonly">Cancel</a>

output.css

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

/* 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:active, .button_primary:hover {
  background-color: #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;
  font-size: 32px;
}
.button_calltoaction:active, .button_calltoaction:hover {
  background-color: #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:active, .button_secondary:hover {
  background-color: #732673;
}

.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:active, .button_tertiary:hover {
  background-color: #dc1e36;
}

.button_disabled {
  color: grey;
  background-color: #cccccc;
  box-shadow: none;
  border: 0;
  text-shadow: none;
  cursor: default;
}
.button_disabled:active, .button_disabled:hover {
  background-color: #b3b3b3;
}

.button_textonly {
  color: grey;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  text-shadow: none;
  font-size: 16px;
  text-transform: none;
}
.button_textonly:active, .button_textonly:hover {
  background-color: transparent;
}