buttons

Buttons

Button sizes
<a href="#" class="btn btn-xl">xl Button</a>
<a href="#" class="btn btn-lg">lg Button</a>
<a href="#" class="btn">md Button</a>
<a href="#" class="btn btn-sm">sm Button</a>
<a href="#" class="btn btn-xs">xs Button</a>
Button colors
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-tertiary">Tertiary</a>
<a href="#" class="btn btn-link">Link Button</a>
Outline buttons
<div class="p1">
  <a href="#" class="btn btn-outline">Default</a>
  <a href="#" class="btn btn-primary btn-outline">Primary</a>
  <a href="#" class="btn btn-secondary btn-outline">Secondary</a>
  <a href="#" class="btn btn-tertiary btn-outline">Tertiary</a>
</div>
<div class="p1 bg-gray">
  <a href="#" class="btn btn-outline-dark">Default</a>
  <a href="#" class="btn btn-primary btn-outline-dark">Primary</a>
  <a href="#" class="btn btn-secondary btn-outline-dark">Secondary</a>
  <a href="#" class="btn btn-tertiary btn-outline-dark">Tertiary</a>
</div>
Button active/current state

Note: .active and .current are the same visually, but may mean different things semantically. Use at your own discretion.

<div class="p1">
  <a href="#" class="btn btn-primary current">Primary</a>
  <a href="#" class="btn btn-secondary active">Secondary</a>
  <a href="#" class="btn btn-tertiary current">Tertiary</a>
  <a href="#" class="btn btn-link active">Link Button</a>
</div>
<div class="p1 bg-gray">
  <a href="#" class="btn btn-link btn-link-dark light">Dark Link Button</a>
  <a href="#" class="btn btn-link btn-link-dark light active">Dark Link Button</a>
</div>
Form inputs using the same classes
<button class="btn btn-sm btn-primary">button</button>
<input type="button" value="input button" class="btn btn-sm btn-secondary">
<input type="submit" value="submit" class="btn btn-sm btn-link">

Buttons mixins

  @mixin button_style(
  $style-name,
  $bg,
  $color:        white,
  $border:       darken($bg, $btn-darken-amount),
  $active-bg:    darken($bg, $btn-darken-amount),
  $active-color: $color,
  $border-width: nil)

Creates a custom button style in the same way as .btn-primary, .btn-secondary, etc.

  • $style is a string that describes the style and uniquely identifies the class
  • $bg is a color value or variable name that refers to the background color of the button
  • $color (OPTIONAL) is a color value or variable name that refers to the default text color of the module
  • $border (OPTIONAL) is a color value or variable name that refers to the border color of the module
  • $active-bg (OPTIONAL) a color value or variable name that affects the active background color state
  • $active-color (OPTIONAL) similar as above, but affects the text color for active states
  • $border-width (OPTIONAL) if buttons have borders, affects the width (in px) of the button border

Input

@include button_style("alert", $alert);

Output

  %btn-alert,
  .btn-alert {
    background-color: $alert;
    color: white;
    border-color: darken(alert, $btn-darken-amount);

    &:hover {
      @if $btn-hover-bg-option { background-color: lighten($alert, $btn-hover-adjustment); }
      @if $btn-border-option   { border-color: lighten(darken(alert, $btn-darken-amount), $btn-hover-adjustment); }
    }

    &:active,
    &.current,
    &.active {
      color: white;
      background-color: darken($alert, $btn-darken-amount) !important;
    }

    &:hover,
    &:visited {
      color: $white;
    }

    @if $border-width { border-width: nil; }
  }
btn_size($size, $longname, $lh)

Creates a custom button size in the same way as .btn-xl, .btn-md, etc.

  • $size is a string suffix that describes the size name and uniquely identifies the class
  • $longname is a string used to describe the size name in a longer format (e.g. "large"); mostly just used internally
  • $lh is the line-height of the button used to determine the appropriate vertical height of the button (e.g. "$lh: 3")

Input

@include button_size(7, "xxl");

Output

  %btn-xxl,
  .btn-xxl {
    @if $btn-border-option {
      line-height: 1; // For FireFox
      line-height: calc((7 * 0.5rem) - (2 * #{$btn-border-width}));
    } @else {
      line-height: 7 * 0.5rem;
    }
    height: 7 * 1rem;
    font-size: 7 * 0.5rem;

    &:not([class^="py"]):not([class*="py"]) {
      padding-top:    ((7 * 0.5) / 2)*1rem;
      padding-bottom: ((7 * 0.5) / 2)*1rem;
    }
    }

Customizing buttons

Overwrite these variables in _custom_variables.scss to change these defaults.

$btn-class-prefix:     "btn" !default;

$btn-font-weight:      $font-weight-base !default;
$btn-border-radius:    0.25rem !default;
$btn-shadow:           inset 0 2px 6px rgba(0,0,0,0.3) !default;
$btn-darken-amount:    20% !default;

$btn-bg-default:       $base-whale-gray !default;
$btn-color-default:    white !default;
$btn-border-default:   darken($btn-bg-default, $btn-darken-amount) !default;

$btn-bg-primary:       $base-blue !default;
$btn-color-primary:    white !default;
$btn-border-primary:   darken($btn-bg-primary, $btn-darken-amount) !default;

$btn-bg-secondary:     $base-blue-soft !default;
$btn-color-secondary:  white !default;
$btn-border-secondary: darken($btn-bg-secondary, $btn-darken-amount) !default;

$btn-bg-tertiary:      $base-violet !default;
$btn-color-tertiary:   white !default;
$btn-border-tertiary:  darken($btn-bg-tertiary, $btn-darken-amount) !default;

$btn-bg-link:          rgba(0,  0,  0,  0.15) !default;
$btn-bg-link-dark:     rgba(255,255,255,0.15) !default;
$btn-border-link:      rgba($base-blue-light,0.0) !default;
$btn-border-link-dark: rgba($base-blue-light,0.0) !default;

$btn-hover-adjustment:     8% !default;
$btn-border-width:         1px !default;
$btn-outline-border-width: 2px !default;
$btn-transition-speed:     0.2s !default;
$btn-vertical-align:       middle !default;

$btn-focus-border-color: $link-light-color !default;
$btn-focus-border-size:  3px !default;

--- Optional customizations ---
$btn-inset-option:       false !default;
$btn-border-option:      true !default;
$btn-radius-option:      true !default;
$btn-text-shadow-option: false !default;
$btn-transition-option:  true !default;
$btn-hover-bg-option:    true !default;
$btn-mobile-full-width:  true !default;

Button groups

  <div class="btn-group mr1">
    <a href="#" class="btn btn-sm">Button</a>
    <a href="#" class="btn btn-sm current">Button</a>
    <a href="#" class="btn btn-sm">Button</a>
  </div>

  <div class="btn-group">
    <a href="#" class="btn btn-tertiary">Button</a>
    <a href="#" class="btn btn-tertiary">Button</a>
  </div>