Skip to content

Instantly share code, notes, and snippets.

@gwing33
Created April 9, 2013 18:27
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 gwing33/5348105 to your computer and use it in GitHub Desktop.
Save gwing33/5348105 to your computer and use it in GitHub Desktop.
Sass + Compass Twitter bootstrap custom button color mixin
=btn_color($primary)
$secondary: adjust-saturation(adjust-lightness($primary, 9), 37)
$tertiary: adjust-saturation(adjust-lightness($primary, 22), 5)
color: #ffffff
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
background-color: $primary
*background-color: $tertiary
+background-image(linear-gradient(top, $secondary, $primary))
background-repeat: repeat-x
border-color: $primary $primary $secondary
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled]
color: #ffffff
background-color: $primary
*background-color: #003bb3
&:active, &.active
background-color: #003399 \9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment