Button Styles

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link. Button styles can be applied to anything with the btn class applied. However, typically you'll want to apply these to only a and button elements.

Base styles

Standard gray button with gradient

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;
  padding: 4px 10px 4px;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @grayDark;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
  vertical-align: middle;
  .buttonBackground(@white, darken(@white, 10%));
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  .border-radius(4px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
  cursor: pointer;

  // Give IE7 some love
  .reset-filter();
  .ie7-restore-left-whitespace();

}


.btn:hover {
  color: @grayDark;
  text-decoration: none;
  background-color: darken(@white, 10%);
  background-position: 0 -15px;

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


.btn:focus {
  .tab-focus();
}



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


.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  background-color: darken(@white, 10%);
  .opacity(65);
  .box-shadow(none);
}

Multiple sizes

Fancy larger or smaller buttons?

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

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

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

Alternate button styles

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

 // Set text color
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  color: @white;
}
 // Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-dark.active {
  color: rgba(255,255,255,.75);
}

 // Set the backgrounds


.btn-primary {
  .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
}

.btn-warning {
  .buttonBackground(lighten(@orange, 15%), @orange);
}

.btn-danger {
  .buttonBackground(#ee5f5b, #bd362f);
}

.btn-success {
  .buttonBackground(#62c462, #51a351);
}

.btn-info {
  .buttonBackground(#5bc0de, #2f96b4);
}

.btn-inverse {
  .buttonBackground(#454545, #262626);
}


 // Cross-browser Jank

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: 2px;
  *padding-bottom: 2px;
  &.large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
}