Arcade Buttons Mixin

Simple mixin that generates arcade looking buttons, just pass in the text color, background color, hover text color and how dark should the side be in %.

Feel free to fork/use it on you projects and if you enjoyed it live a like.

@mixin button-arcade($text-color,$background-color,$hover-text-color,$shadow-gradient) {border: none;text-decoration: none;padding: 15px 25px;color: $text-color;border-radius: 50px;background-color: $background-color;display: inline-block;position: relative;box-shadow: 0 8px darken($background-color, $shadow-gradient); &:hover {color: $hover-text-color;box-shadow: 0 6px darken($background-color,$shadow-gradient);top: 2px;} &:active {box-shadow: 0 0px darken($background-color, $shadow-gradient);top: 8px;} &:focus {outline: 0;} }