%btn {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-size: 0.9em;
    font-size: 16px;
    font-weight: normal;
    padding: 6px 18px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    transition: all 0.3s ease;

    // hovering on the btn
    &:hover,
    &:focus {
        color: $white;
        text-decoration: none;
        outline: none;
    } // end hover

    // clicking on the button
    &:active {
        top: 1px; // adds a tiny hop to the click
    } // end active
} // end .button

%btn-blue {
    @extend %btn;
    background-color: $blue-dark;
    border: 2px solid $blue-dark;
    color: $white;
    &:hover,
    &:focus {
        background-color: lighten($blue-dark, 10%);
        border-color: lighten($blue-dark, 10%);
    }
}

%btn-blue-light {
    @extend %btn;
    background-color: $blue-light;
    border: 2px solid $blue-light;
    color: $blue-dark;
    &:hover,
    &:focus {
        background-color: darken($blue-light, 10%);
        border-color: darken($blue-light, 10%);
    }
}

.btn {
    @extend %btn;
}

.btn-blue {
    @extend %btn-blue;
}

.btn-blue-light {
    @extend %btn-blue-light;
}