Skip to content

Instantly share code, notes, and snippets.

@Victa
Created August 10, 2012 09:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Victa/3313052 to your computer and use it in GitHub Desktop.
Save Victa/3313052 to your computer and use it in GitHub Desktop.
Sass Button Mixin - Inspired by Bourbon button mixin
/*------------------------------------*\
Auto Button Mixin
\*------------------------------------*/
@mixin button( $base-color: #f9f9f9,
$radius: 4px,
$bold: true,
$drop-shadow: true,
$padding: '.5em 1.5em'){
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $lightness: -20%);
$inset-shadow: adjust-color($base-color, $lightness: 15%);
$stop-gradient: adjust-color($base-color, $lightness: -8%);
$text-shadow: -1px -1px 0 adjust-color($base-color, $lightness: -20%);
$drop-shadow-c: '';
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: 1px 1px 0 adjust-color($base-color, $lightness: 4%);
}
@if $drop-shadow == true{
$drop-shadow-c: ', 0 1px 3px rgba(0,0,0,.1)';
}
@include border-radius($radius);
@include box-shadow(inset 0 1px 0 0 $inset-shadow unquote($drop-shadow-c));
@include background-image(linear-gradient($base-color, $stop-gradient));
-webkit-background-clip: padding-box;
background-color:$base-color;
border: 1px solid $border;
color: $color;
display: inline-block;
padding:unquote($padding);
text-decoration: none;
text-shadow: $text-shadow;
@if $bold == true {
font-weight:bold;
}
&:hover {
$color: hsl(0, 0, 100%);
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 10%);
}
$base-color-hover: adjust-color($base-color, $lightness: -2%);
$inset-shadow-hover: adjust-color($base-color, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $lightness: -10%);
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover unquote($drop-shadow-c));
@include background-image(linear-gradient($base-color-hover, $stop-gradient-hover));
cursor: pointer;
color: $color;
background-color:$base-color-hover;
}
&:active {
$inset-shadow-active: adjust-color($base-color, $lightness: -8%);
@include box-shadow(inset 0 0 8px 4px $inset-shadow-active,
inset 0 0 8px 4px $inset-shadow-active,
0 1px 1px 0 #eee unquote($drop-shadow-c));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment