Button mixin sample build with Sass
A Pen by Bilal Çınarlı on CodePen.
<a class="button-blue">Blue Button</a> | |
<span class="button-purple">Purple Button</span> | |
<button class="button-green">Green Button</button> | |
<input type="submit" class="button-gray" value="Gray Button" /> | |
<a class="button-black">Black Button</a> | |
<span class="button-white">White Button</span> |
@import "compass"; | |
$white-transparent: rgba(white, 0); | |
$gray-transparent: rgba(gray, 0); | |
$black-transparent: rgba(black, 0); | |
@mixin button($color, $radius: 5px, $gradient: true) { | |
/** parameters **/ | |
$light: lighten($color, 20%); | |
$dark: darken($color, 15%); | |
$text-color: #fff; | |
$text-shadow: black; | |
$transparent: $gray-transparent; | |
@if (lightness($color) > 60%){ | |
$transparent: $white-transparent; | |
$text-color: #000; | |
$text-shadow: #eee; | |
} | |
@else if(lightness($color) < 20%){ | |
$transparent: $black-transparent; | |
} | |
/** parameters **/ | |
border-color: $dark; | |
@if $radius != null { | |
border-radius: $radius; | |
} | |
background-color: $light; | |
@if $gradient == true { | |
@include background-image(linear-gradient($transparent, $color)); | |
} | |
color: $text-color; | |
text-shadow: 0 1px 0 rgba($text-shadow, 0.3); | |
box-shadow: 0 1px 3px rgba($dark, 0.5); | |
&:hover { | |
background-color: $dark; | |
@if $gradient == true { | |
@include background-image(linear-gradient($gray-transparent, $dark)); | |
} | |
} | |
&:active { | |
background: $dark; | |
box-shadow: 0 1px 3px rgba($dark, 0.5), inset 0 1px 2px rgba($light, 0.5); | |
} | |
} | |
body { padding: 20px; } | |
* { @include transition(all 0.5s ease); } | |
[class*="button-"] { cursor: pointer; display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid; } | |
[class*="-blue"] { @include button(#1b8dbe); } | |
[class*="-purple"] { @include button(#7b4284); } | |
[class*="-green"] { @include button(#6a9d31); } | |
[class*="-gray"] { @include button(#848484); } | |
[class*="-black"] { @include button(#222); } | |
[class*="-white"] { @include button(#eee); } |