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