|
@mixin shadow-button($background-color, $text-color) { |
|
background: $background-color; |
|
@include box-shadow(transparentize(darken($background-color, 40%), .8) 0 -20px 15px inset, transparentize(#fff, .9) 0 2px 1px inset, transparentize(#000, .8) 0 0 1px); |
|
@include border-radius(4px); |
|
@include inline-block; |
|
border: 1px solid darken($background-color, 20%); |
|
@include text-shadow(transparentize(darken($background-color, 30%), .3) 0 1px 1px ); |
|
color: $text-color; |
|
@include transition-property("box-shadow, background, color"); |
|
@include transition-duration(.1s); |
|
cursor: pointer; |
|
padding: 5px 14px 6px 14px; |
|
text-align: center; |
|
&:hover { |
|
text-decoration: none; |
|
background: lighten($background-color, 2%); |
|
@include transition-property("box-shadow, background, color"); |
|
@include transition-duration(.07s); |
|
color: $text-color; |
|
} |
|
&:active { |
|
@include box-shadow(transparentize(darken($background-color, 50%), .5) 0 1px 4px inset, transparentize(#fff, .9) 0 2px 1px inset, transparentize(#fff, .8) 0 0 1px); |
|
@include transition-property("box-shadow, background, color"); |
|
@include transition-duration(.07s); |
|
background: desaturate(darken($background-color, 8%), 20%); |
|
color: transparentize($text-color, .2s); |
|
padding: 6px 14px 5px 14px; |
|
} |
|
} |
Like