A button suitable for giving stars to someone.

:hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used.

Styleguide 2.1.3.

States

Hover state

Focus state for keyboard and accessibility

Active state

Add the disabled class to links and the disabled attribute for button elements.

.btn {
  display: inline-block;
  @include ie7-inline-block();
  padding: 4px 14px;
  margin-bottom: 0; // For input.btn
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
  *line-height: $baseLineHeight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  // @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));    background: url('../img/my-image.jpg') 0 0 no-repeat;
  border: 1px solid $btnBorder;
  *border: 0; // Remove the border to prevent IE7's black border on input:focus
  border-bottom-color: darken($btnBorder, 10%);
  @include border-radius(4px);
  @include ie7-restore-left-whitespace(); // Give IE7 some love
  @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});


  &:hover {
    color: $grayDark;
    text-decoration: none;
    background-color: darken($white, 10%);
    *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
    background-position: 0 -15px;

    // transition is only when going to hover, otherwise the background
    // behind the gradient (there for IE<=9 fallback) gets mismatched
    @include transition(background-position .1s linear);
  }


  // Focus state for keyboard and accessibility
  &:focus {
    @include tab-focus();
  }



  &.active,
  &:active {
    background-color: darken($white, 10%);
    background-color: darken($white, 15%) \9;
    background-image: none;
    outline: 0;
    @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
  }



  // Disabled state
  &.disabled,
  &[disabled] {
    cursor: default;
    background-color: darken($white, 10%);
    background-image: none;
    @include opacity(65);
    @include box-shadow(none);
  }

}

Multiple sizes

Fancy larger or smaller buttons?

Large

Small

Mini

Block button

Alternate buttons

Provide some extra contrast for those who can get it

Set the backgrounds

Provides extra visual weight and identifies the primary action in a set of buttons.

Indicates caution should be taken with this action

Indicates a dangerous or potentially negative action

Indicates a successful or positive action

Used as an alternate to the default styles

Alternate dark gray button, not tied to a semantic action or use

Cross-browser Jank

Make a button look and behave like a link

.btn-large {
  padding: 9px 14px;
  font-size: $baseFontSize + 2px;
  line-height: normal;
  @include border-radius(5px);
}
.btn-large [class^="icon-"] {
  margin-top: 2px;
}



.btn-small {
  padding: 3px 9px;
  font-size: $baseFontSize - 2px;
  line-height: $baseLineHeight - 2px;
}
.btn-small [class^="icon-"] {
  margin-top: 0px;
}



.btn-mini {
  padding: 2px 6px;
  font-size: $baseFontSize - 3px;
  line-height: $baseLineHeight - 4px;
}


.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  @include box-sizing(border-box);
}
.btn-block + .btn-block {
  margin-top: 5px;
}



.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
  color: rgba(255,255,255,.75);
}

.btn {
  // reset here as of 2.0.3 due to Recess property order
  border-color: #c5c5c5;
  border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}

 // Set the backgrounds



.btn-primary {
  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
}



.btn-warning {
  @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
}



.btn-danger {
  @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
}



.btn-success {
  @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
}


.btn-info {
  @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
}

.btn-inverse {
  @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
}



button.btn,
input[type="submit"].btn {

  // Firefox 3.6 only I believe
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  // IE7 has some default padding on button controls
  *padding-top: 3px;
  *padding-bottom: 3px;
  &.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
  &.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
  }
}



.btn-link,
.btn-link:active {
  background-color: transparent;
  background-image: none;
  @include box-shadow(none);
}
.btn-link {
  border-color: transparent;
  cursor: pointer;
  color: $linkColor;
  @include border-radius(0);
}
.btn-link:hover {
  color: $linkColorHover;
  text-decoration: underline;
  background-color: transparent;
}