Button Mixin

button.scss

/* set colour(s) */
$primary : red;
 
/* button */
@mixin button($color: $primary, $text-color: #fff, $radius: 3px) {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 50px;
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: .025em;
    color: $text-color;
    outline: none;
    background: $color;
    border-radius: $radius;
    &:hover {
        text-decoration: none;
        background: saturate($color, 10%);
    }
    &:active {
        position: relative;
        top: 1px;
        color: $text-color;
    }
}