Edit in JSFiddle

@mixin brilliant-button($hue:0, $sat:80) {
    border: solid 1px hsl($hue, 50%,  50%);
    border-radius: 4px;
    box-shadow:
         1px  1px hsla($hue, $sat%, 100%, .5) inset,
        -1px -1px hsla($hue, $sat%,  50%, .5) inset;
    color: hsl($hue, 50%, 30%);
    margin: 1em;
    padding: 4px 10px;
    text-align: center;
    text-shadow:
        -1px -1px hsla($hue, $sat%,  70%, .5),
         1px  1px hsla($hue, $sat%, 100%, .5);
    
    background-image: -moz-linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  50%,
        hsl($hue, $sat%,  70%)  51%,
        hsl($hue, $sat%,  50%) 100%
        );
    background-image: -ms-linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  50%,
        hsl($hue, $sat%,  70%)  51%,
        hsl($hue, $sat%,  50%) 100%
        );
    background-image: -o-linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  50%,
        hsl($hue, $sat%,  70%)  51%,
        hsl($hue, $sat%,  50%) 100%
        );
    background-image: -webkit-linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  50%,
        hsl($hue, $sat%,  70%)  51%,
        hsl($hue, $sat%,  50%) 100%
        );
    background-image: linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  50%,
        hsl($hue, $sat%,  70%)  51%,
        hsl($hue, $sat%,  50%) 100%
        );
}
@mixin brilliant-button-active($hue:200, $sat:80) {
    background-image: -webkit-linear-gradient(
        top,
        hsl($hue, $sat%, 100%)   0%,
        hsl($hue, $sat%,  80%)  60%,
        hsl($hue, $sat%,  70%)  71%,
        hsl($hue, $sat%,  50%) 100%
        );
    box-shadow:
         1px  1px 4px hsla($hue, $sat%,  30%, .5) inset;
    padding: 5px 9px 3px 11px;
}

// Red
.board1 { @include brilliant-button(0); }
.board1:active { @include brilliant-button-active(0); }

// Orange
.board2 { @include brilliant-button(30, 100); }
.board2:active { @include brilliant-button-active(30, 100); }

// Yellow
.board3 { @include brilliant-button(60); }
.board3:active { @include brilliant-button-active(40); }

// Green
.board4 { @include brilliant-button(100, 60); }
.board4:active { @include brilliant-button-active(100, 60); }

// Blue
.board5 { @include brilliant-button(210); }
.board5:active { @include brilliant-button-active(210); }

// Indigo
.board6 { @include brilliant-button(250, 50); }
.board6:active { @include brilliant-button-active(250, 50); }

// Violet
.board7 { @include brilliant-button(280, 50); }
.board7:active { @include brilliant-button-active(280, 50); }

<button class="board1">Gradient with HSL</button>
<button class="board2">Gradient with HSL</button>
<button class="board3">Gradient with HSL</button>
<button class="board4">Gradient with HSL</button>
<button class="board5">Gradient with HSL</button>
<button class="board6">Gradient with HSL</button>
<button class="board7">Gradient with HSL</button>