Brilliant buttons (Rainbow)

by ginpei

HTML

<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>

SCSS

@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);...