<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>
<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>
<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>
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>
<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">
@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 borderInput
@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; }
}
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;
}
}
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;
<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>