$button-padding : em(10px 20px); @mixin button($bg-color:$main-color, $for-base:false) { // Button Shadow $shadow-base : 0 1px 0 darken($bg-color, 20%); $shadow-hover : inset 1px 1px 5em rgba(black, 0.2); background : $bg-color; color : contrast-color($bg-color, #333, white, 50%); border : none; @if $full { $shadow-base : 0 1px 0 darken($bg-color, 20%); @include box-shadow($shadow-base ); } @if $for-base { position : relative; cursor : pointer; padding : $button-padding; @if $full { &:hover { // background: darken($bg-color, 10%); @include box-shadow($shadow-base, $shadow-hover ); } &:active { top: 1px; border: none; @include box-shadow($shadow-hover ); } } } } @if $include-button { /* --------------- EDGE Button --------------- */ button, .button, input[type="button"], input[type="submit"], input[type="reset"] { @include button($for-base:true); } } // $include-button