SassStuff/3D Components/Sass/assets/_button.scss

// Buttons
@mixin btn($color, $fg: $color) {
    background: $color;
    background-image: linear-gradient(to top, darken($color, 5%), $color);
    border-color: $color;
    text-shadow: 0 1px 0 $color;
    color: darken($fg, 30%);

    &:hover {
        background: darken($color, 5%);
        background-image: linear-gradient(to bottom, darken($color, 5%), $color);
        border-color: darken($color, 5%);
    }

    &:active {
        background: darken($color, 10%);
        border-color: darken($color, 10%);
        box-shadow: 0 1px 2px rgba($color, 0.6);
    }

    &:focus {
        border-color: darken($color, 5%);
        box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
    }

    &:disabled {
        background: darken($color, 20%);
        border-color: darken($color, 25%);
        text-shadow: none;
        color: darken($fg, 30%);
    }
}

.btn {
    display: inline-block;
    padding: 0.5em 1em;
    background: $black;
    border: 1px solid $black;
    @if $border-radius <= 0 {
        border-radius: 3px;
    } @else {
        border-radius: $border-radius;
    }
    color: $white;
    text-decoration: none;
    text-shadow: 0 1px 0 $black;
    box-shadow: 0 1px 2px rgba($black, 0.2);
    transition: all 0.2s ease-in-out;

    &:hover {
        background: $black;
        border-color: $black;
        box-shadow: 0 1px 2px rgba($black, 0.2);
        cursor: pointer;
    }

    &:active {
        background: #000;
        border-color: $black;
        box-shadow: inset 0 1px 2px rgba($black, 0.3);
    }

    &:focus {
        outline: none;
        border-color: $black;
        box-shadow: 0 0 0 1px rgba($black, 0.2), 0 1px 2px rgba($black, 0.2);
    }

    &:disabled {
        background: #151515;
        border-color: $black;
        color: #333;
        cursor: default;
    }

    &.btn-wide {
        width: 100%;
    }

    &.btn-primary {
        @include btn($accent);
    }

    &.btn-secondary {
        @include btn($accent-alt);
    }

    &.btn-success {
        @include btn($green);
    }

    &.btn-danger {
        @include btn($red);
    }

    &.btn-warning {
        @include btn($orange);
    }

    &.btn-info {
        @include btn($blue);
    }

    &.btn-dark {
        @include btn($black, #fefefe);
    }

    &.btn-light {
        @include btn($white, #121212);
    }
}