Source on Github

Blueprint Buttons

Install the buttons module with:

compass install blueprint/buttons

This file can be imported using: @import "blueprint/buttons"

Imports

  1. Inline Block – Declare an element inline block for all browsers.
  2. Float – Mixins for cross-browser floats.

Configurable Variables help

"Lucida Grande", Tahoma, Arial, Verdana, sans-serif

Button Font

#dedede

Default Button Colors

whitesmoke

#565656

#c2e1ef

Default Button Hover Colors

#dff4ff

#336699

#6299c5

Default Button Active Colors

#6299c5

white

Mixins

view source 

=button-colors($font-color: $blueprint-button-font-color, $bg-color: $blueprint-button-background-color, $border-color: $blueprint-button-border-color, $border-highlight-color: $border-color + #101010)
  background-color: $bg-color
  border-color: $border-highlight-color $border-color $border-color $border-highlight-color
  color: $font-color

@mixin button-colors($font-color: $blueprint-button-font-color, $bg-color: $blueprint-button-background-color, $border-color: $blueprint-button-border-color, $border-highlight-color: $border-color + #101010) {
  background-color: $bg-color;
  border-color: $border-highlight-color $border-color $border-color $border-highlight-color;
  color: $font-color;
}

Sets the colors for a button @param border-highlight-color The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.

view source 

=button-active-colors($font-color: $blueprint-button-active-font-color, $bg-color: $blueprint-button-active-background-color, $border-color: $blueprint-button-active-border-color, $border-highlight-color: $border-color + #101010)
  &:active
    +button-colors($font-color, $bg-color, $border-color, $border-highlight-color)

@mixin button-active-colors($font-color: $blueprint-button-active-font-color, $bg-color: $blueprint-button-active-background-color, $border-color: $blueprint-button-active-border-color, $border-highlight-color: $border-color + #101010) {
  &:active {
    @include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
  }
}

Sets the colors for a button in the active state @param border-highlight-color The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.

view source 

=button-hover-colors($font-color: $blueprint-button-hover-font-color, $bg-color: $blueprint-button-hover-background-color, $border-color: $blueprint-button-hover-border-color, $border-highlight-color: $border-color + #101010)
  &:hover
    +button-colors($font-color, $bg-color, $border-color, $border-highlight-color)

@mixin button-hover-colors($font-color: $blueprint-button-hover-font-color, $bg-color: $blueprint-button-hover-background-color, $border-color: $blueprint-button-hover-border-color, $border-highlight-color: $border-color + #101010) {
  &:hover {
    @include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
  }
}

Sets the colors for a button in the hover state. @param border-highlight-color The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.

view source 

=button-base($float: false)
  @if $float
    +float($float)
    display: block
  @else
    +inline-block
  margin: 0.7em 0.5em 0.7em 0
  border-width: 1px
  border-style: solid
  font-family: $blueprint-button-font-family
  font-size: 100%
  line-height: 130%
  font-weight: bold
  text-decoration: none
  cursor: pointer
  img
    margin: 0 3px -3px 0 !important
    padding: 0
    border: none
    width: 16px
    height: 16px
    float: none

@mixin button-base($float: false) {
  @if $float {
    @include float($float);
    display: block;
  }
  @else {
    @include inline-block;
  }
  margin: 0.7em 0.5em 0.7em 0;
  border-width: 1px;
  border-style: solid;
  font-family: $blueprint-button-font-family;
  font-size: 100%;
  line-height: 130%;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  img {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
    float: none;
  }
}
view source 

=anchor-button($float: false)
  +button-base($float)
  padding: 5px 10px 5px 7px

@mixin anchor-button($float: false) {
  @include button-base($float);
  padding: 5px 10px 5px 7px;
}
view source 

=button-button($float: false)
  +button-base($float)
  width: auto
  overflow: visible
  padding: 4px 10px 3px 7px
  &[type]
    padding: 4px 10px 4px 7px
    line-height: 17px
  *:first-child + html &[type]
    padding: 4px 10px 3px 7px

@mixin button-button($float: false) {
  @include button-base($float);
  width: auto;
  overflow: visible;
  padding: 4px 10px 3px 7px;
  &[type] {
    padding: 4px 10px 4px 7px;
    line-height: 17px;
  }
  *:first-child + html &[type] {
    padding: 4px 10px 3px 7px;
  }
}