button example 2: placeholder extend, no variables, old classnames Get Sassy talk examples for Thunder Plains Conf 11/7/13

2-buttons-placeholder.scss

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

%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: #fff;
    background-color: #2ba2a6;
    box-shadow: 0px 8px 0px 0px rgba(0,0,0, 0.125);
    border-right: 1px solid #217a7d;
    border-bottom: 1px solid #217a7d;
    text-shadow: 0px 1px 1px rgba(0,0,0,.25);
    
    &:hover,
    &:active,
    &:focus {
        background: #217A7D;
    }

}

// Call to Action buttons - for large, highlighted calls to action
%button_calltoaction {
    @extend %button;
    background: #237cbe;
    box-shadow: 0px 8px 0px 0px rgba(35, 124, 190, 0.25);
    border: 1px solid #1b6093;
    text-shadow: 0px 1px 1px #0b283d;
    color: #fff;

    &:hover,
    &:active,
    &:focus {
        background: #1B6093;
        border-color: #0B283D;
    }
}

// Secondary buttons -- for secondary actions
%button_secondary {
    @extend %button;
    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;

    &:hover,
    &:active,
    &:focus {
        background: #732673;
    }
}

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

// Tertiary button -- in this case, for delete, third actions
%button_tertiary {
    @extend %button;
    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;
    &:hover,
    &:active,
    &:focus {
        background: darken(#e6475b,10%);
    }
}

// Text Only buttons - for Cancel, small Edit links, etc
%button_textonly {
    @extend %button;
    color: black;
    font-size: .8em;
    text-transform: capitalize;
    
    &:hover,
    &:active,
    &:focus {
        color: #666;
    }
    &.button_disabled {
        background: none;
        color: #ccc;
    }
}

#button_save_form {@extend %button_primary;}
#button_signup {@extend %button_calltoaction;}
#button_delete_comment {@extend %button_tertiary;}
#button_cancel_comment {@extend %button_textonly;}
#button_edit_profile {@extend %button_secondary;}
#button_edit_profile.is-disabled {@extend %button_secondary; @extend %button_disabled;}

buttons-old.html

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

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

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

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

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

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

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

output.css

#button_save_form, #button_signup, #button_edit_profile, #button_edit_profile.is-disabled, #button_delete_comment, #button_cancel_comment {
  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_save_form {
  color: #fff;
  background-color: #2ba2a6;
  box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 0.125);
  border-right: 1px solid #217a7d;
  border-bottom: 1px solid #217a7d;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
#button_save_form:hover, #button_save_form:active, #button_save_form:focus {
  background: #217A7D;
}

#button_signup {
  background: #237cbe;
  box-shadow: 0px 8px 0px 0px rgba(35, 124, 190, 0.25);
  border: 1px solid #1b6093;
  text-shadow: 0px 1px 1px #0b283d;
  color: #fff;
}
#button_signup:hover, #button_signup:active, #button_signup:focus {
  background: #1B6093;
  border-color: #0B283D;
}

#button_edit_profile, #button_edit_profile.is-disabled {
  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_edit_profile:hover, #button_edit_profile:active, #button_edit_profile:focus {
  background: #732673;
}

#button_edit_profile.is-disabled {
  color: #888;
  background-color: #ccc;
  cursor: default;
  text-shadow: none;
  box-shadow: none;
  border-color: transparent;
}
#button_edit_profile.is-disabled:hover, #button_edit_profile.is-disabled:active, #button_edit_profile.is-disabled:focus {
  background-color: #ccc;
  color: #888;
}

#button_delete_comment {
  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_delete_comment:hover, #button_delete_comment:active, #button_delete_comment:focus {
  background: #dc1e36;
}

#button_cancel_comment {
  color: black;
  font-size: .8em;
  text-transform: capitalize;
}
#button_cancel_comment:hover, #button_cancel_comment:active, #button_cancel_comment:focus {
  color: #666;
}
.button_disabled#button_cancel_comment {
  background: none;
  color: #ccc;
}