SASS buttons using extend

sass-buttons.scss

/* Buttons
============================================================
========================================================= */

// button:disabled {
//     background: $gray;
// }

%button {
    color: #fff;
    // font-weight: 600;
    text-shadow: 1px 1px #333;
    background: lighten($button, 10%);
    border: 1px solid lighten($button, 20%);
    cursor: pointer;
    @include rounded(5px);

    &:hover {
        border: 1px solid lighten($buttonHover, 10%);
        background: $buttonHover;
    }

    &:active { 
        text-shadow: 1px 1px #666;
        border: 1px solid darken(#6e6f72, 10%);
        background: lighten($button, 20%);
    }
}

%twitter-background {
    color: #fff;
    background: $twitter;
}

%facebook-background {
    color: #fff;
    background: $facebook;
}

.btn {

    // .btn--twitter
    &--twitter {
        @extend %button;
        @extend %twitter-background;
    }

    // .btn--facebook
    &--facebook {
        @extend %button;
        @extend %facebook-background;
    }
}