Standard Buttons

Default State

  • Bottom margin: 0px
  • Font family: Arial
  • Font weight: bold
  • Text align: left
  • Vertical align: middle
  • Cursor: pointer
  • Border: none
  • Vertical padding: @padding-base-vertical (8px)
  • Horizontal padding: @padding-base-horizontal (15px)
  • Border radius: 0
  • Line height: 1.4 (20/14)

Hover State

  • Background: darken 12%
  • Border: darken 14%

Color

Add the classes below to <button class="btn">, <input class="btn"> and <a class="btn"> to color the buttons.

Size

Extra Small

  • Horizontal padding: @padding-xs-horizontal (1px)
  • Vertical padding: @padding-xs-vertical (5px)
  • Border: none
  • Font size: @font-size-small (12px)
    This size may be too small for sites with minimum accessibility requirements.
  • Line height: @line-height-small (1.5)

Small

  • Horizontal padding: @padding-small-horizontal (3px)
  • Vertical padding: @padding-small-vertical (8px)
  • Border: none
  • Font size: @font-size-small (12px)
    This size may be too small for sites with minimum accessibility requirements.
  • Line height: @line-height-small (1.5)

Large

  • Horizontal padding: @padding-large-horizontal (24px)
  • Vertical padding: @padding-large-vertical (16px)
  • Font size: @font-size-large (21px)
  • Line height: @line-height-large (1.3)

Add the classes below to <button class="btn">, <input class="btn"> and <a class="btn"> to resize the buttons.

Width

  • Display: block
  • Width: 100%

Add the btn-block class to <button class="btn">, <input class="btn"> and <a class="btn"> to make the button fill its container.

Examples

States

Active

  • Outline: none
  • Width: 100%
  • Box Shadow: inset, offset: 0 3px 5px, black 12.5% opacity

Add the active class to <button class="btn">, <input class="btn"> and <a class="btn"> to make the button appear selected/active.

Disabled

Add the disabled class to <button class="btn">, <input class="btn"> and <a class="btn"> to make the button appear disabled.

Disabled buttons inside a paragraph (<p>) behave differently:

  • <a> doesn't support thedisabled attribute. Add the .disabled class to make it visually appear disabled.
  • Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers that support the property, you won’t see the disabled cursor at all.
  • Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.