by
4,027 19

SCSS button power @mixin

one $color variable generates all buttons by @mixin and color @functions also leverages %placeholders and %placeholder-selectors
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1248043/SCSS-button-power--mixin?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
//core values $font-size:16; $primary: #0085B7; $success: adjust_hue($primary, 260); $warning: saturate(adjust_hue($primary, 188), 43); $alert: lighten(saturate(adjust_hue($primary, 162), 12), 1); // function @function em($target, $context:$font-size){ @return ($target/$context) * 1em; } //!default values $button-colour: $primary !default; $button-text-color: white !default; $button-line-height: 32 !default; $button-border-radius: 3 !default; $button-padding: 30 !default; $button-font-size: 24 !default; $button-weight: bold !default; //the btn mixin @mixin default-button($color: $button-text-color, $line-height: $button-line-height, $radius: $button-border-radius, $padding: $button-padding, $font-size: $button-font-size, $weight: $button-weight){ color: $color; line-height: em($line-height); border-radius: em($radius); padding: 0 em($padding); font-size: em($font-size); font-weight: $weight; } @mixin flat-button($color: $button-color){ $highlight-color: lighten($color, 50%); $shadow-color: grayscale(transparentize($color, 0.1)); background-color: $color; border: 1px solid darken($color, 10%); text-shadow: 0px 1px 1px darken($color, 20%); box-shadow: 0 em(2) em(6) 0 $shadow-color; &:hover{ background-color: darken($color, 5%); text-shadow: 1px 1px 1px darken($highlight-color, 5%); } } //placeholder selector %default-button{ @include default-button; } .primary{ @extend %default-button; @include flat-button($primary); } .success{ @extend %default-button; @include flat-button($success); } .warning{ @extend %default-button; @include flat-button($warning); } .alert{ @extend %default-button; @include flat-button($alert); }
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus