Switch to custom properties for colorizing buttons

scss/_buttons.scss

@@ -4,34 +4,48 @@
 
 .btn {
   display: inline-block;
+  padding: $btn-padding-y $btn-padding-x;
+  @include font-size($btn-font-size);
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
   line-height: $btn-line-height;
-  color: $body-color;
+  color: var(--btn-accent-contrast-color);
   text-align: center;
   text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
   user-select: none;
-  background-color: transparent;
+  background-color: var(--btn-accent-color);
-  border: $btn-border-width solid transparent;
+  border: $btn-border-width solid $btn-border-color;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
+
   @include transition($btn-transition);
+  @include gradient-bg();
+  @include border-radius($btn-border-radius, 0); // Manually declare to provide an override to the browser default
+  @include box-shadow($btn-box-shadow);
 
   &:hover {
-    color: $body-color;
+    color: var(--btn-accent-contrast-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   &:focus,
   &.focus {
     outline: 0;
+
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, $btn-focus-box-shadow;
+    } @else {
       box-shadow: $btn-focus-box-shadow;
     }
+  }
 
   &:active,
-  &.active {
+  &.active,
+  .show > &.dropdown-toggle {
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
     @include box-shadow($btn-active-box-shadow);
 
     &:focus {
@@ -43,11 +57,37 @@
   &.disabled,
   fieldset:disabled & { // stylelint-disable-line selector-no-qualifying-type
     pointer-events: none;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
     opacity: $btn-disabled-opacity;
     @include box-shadow(none);
   }
 }
 
+.btn-outline {
+  color: var(--btn-accent-color);
+  background-color: transparent;
+  border-color: currentColor;
+
+  &:hover {
+    background-color: var(--btn-accent-color);
+    border-color: var(--btn-accent-color);
+  }
+
+  &:focus,
+  &.focus {
+    color: var(--btn-accent-contrast-color);
+    background-color: var(--btn-accent-color);
+    border-color: var(--btn-accent-color);
+  }
+
+  &.active,
+  &:active {
+    color: var(--btn-accent-contrast-color);
+    background-color: var(--btn-accent-color);
+    border-color: var(--btn-accent-color);
+  }
+}
 
 //
 // Alternate buttons
@@ -55,16 +95,33 @@
 
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @include button-variant($value, $value);
+    $contrast-color: color-contrast($value);
+
+    --btn-accent-color: #{$value};
+    --btn-accent-contrast-color: #{$contrast-color};
+
+    &:hover {
+      $accent-hover: darken($value, 5%);
+      $accent-hover-contrast-color: color-contrast($accent-hover);
+
+      --btn-accent-color: #{$accent-hover};
+      @if ($contrast-color != $accent-hover-contrast-color) {
+        --btn-accent-contrast-color: #{$accent-hover-contrast-color};
       }
     }
 
-@each $color, $value in $theme-colors {
+    &.active,
-  .btn-outline-#{$color} {
+    &:active {
-    @include button-outline-variant($value);
+      $accent-active: darken($value, 15%);
-  }
+      $accent-active-contrast-color: color-contrast($accent-active);
-}
 
+      --btn-accent-color: #{$accent-active};
+      @if ($contrast-color != $accent-active-contrast-color) {
+        --btn-accent-contrast-color: #{$accent-active-contrast-color};
+      }
+    }
+  }
+}
 
 //
 // Link buttons
@@ -72,9 +129,10 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
+  font-weight: $font-weight-base;
   color: $btn-link-color;
   text-decoration: $link-decoration;
+  border-color: if($btn-border-color != transparent, transparent, null);
 
   &:hover {
     color: $btn-link-hover-color;
@@ -84,14 +142,13 @@
   &:focus,
   &.focus {
     text-decoration: $link-hover-decoration;
+    box-shadow: 0 0 0 $btn-focus-offset $body-bg, 0 0 0 $btn-focus-width;
   }
 
   &:disabled,
   &.disabled {
     color: $btn-link-disabled-color;
   }
-
-  // No need for an active state here
 }
 
 
@@ -99,12 +156,16 @@
 // Button Sizes
 //
 
-.btn-lg {
+.btn-sm {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
+  @include font-size($btn-font-size-sm);
+  @include border-radius($btn-border-radius-sm);
 }
 
-.btn-sm {
+.btn-lg {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+  padding: $btn-padding-y-lg $btn-padding-x-lg;
+  @include font-size($btn-font-size-lg);
+  @include border-radius($btn-border-radius-lg);
 }
 
 

scss/_mixins.scss

@@ -21,7 +21,6 @@
 
 // Components
 @import "mixins/alert";
-@import "mixins/buttons";
 @import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";

scss/_variables.scss

@@ -534,12 +534,14 @@ $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
 
+$btn-border-color:            rgba($black, .01) !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-focus-offset:            $input-btn-focus-width / 2 !default;
+$btn-focus-box-shadow:        0 0 0 $btn-focus-offset, 0 0 0 $input-btn-focus-width var(--btn-accent-color) !default;
 $btn-disabled-opacity:        .65 !default;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 

scss/mixins/_buttons.scss

@@ -1,121 +0,0 @@
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
-
-@mixin button-variant(
-  $background,
-  $border,
-  $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
-  $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
-  $active-color: color-contrast($active-background)
-) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border;
-  @include box-shadow($btn-box-shadow);
-
-  &:hover {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
-
-  &:focus,
-  &.focus {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-    } @else {
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-    }
-  }
-
-  &:active,
-  &.active,
-  .show > &.dropdown-toggle {
-    color: $active-color;
-    background-color: $active-background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $active-border;
-
-    &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-      } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $color;
-    background-color: $background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $border;
-  }
-}
-
-@mixin button-outline-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
-  color: $color;
-  border-color: $color;
-
-  &:hover {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
-
-  &:focus,
-  &.focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-  }
-
-  &:active,
-  &.active,
-  &.dropdown-toggle.show {
-    color: $active-color;
-    background-color: $active-background;
-    border-color: $active-border;
-
-    &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
-      } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $color;
-    background-color: transparent;
-  }
-}
-
-// Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  padding: $padding-y $padding-x;
-  @include font-size($font-size);
-  // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
-}

scss/mixins/_gradients.scss

@@ -1,14 +1,14 @@
 // Gradients
 
-@mixin gradient-bg($color, $foreground: null) {
+@mixin gradient-bg($color: null, $foreground: null) {
+  background-color: $color;
+
   @if $enable-gradients {
     @if $foreground {
-      background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
+      background-image: $foreground, linear-gradient(180deg, rgba($color, .15), transparent);
     } @else {
-      background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
+      background-image: linear-gradient(180deg, rgba($body-bg, .15), transparent);
     }
-  } @else {
-    background-color: $color;
   }
 }
 

site/content/docs/4.3/components/buttons.md

@@ -44,12 +44,12 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 
 ## Outline buttons
 
-In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline btn-*` ones to remove all background images and colors on any button.
 
 {{< example >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
+<button type="button" class="btn btn-outline btn-{{ .name }}">{{ .name | title }}</button>
 {{- end -}}
 {{< /buttons.inline >}}
 {{< /example >}}

site/content/docs/4.3/components/navbar.md

@@ -68,7 +68,7 @@ Here's an example of all the sub-components included in a responsive light-theme
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -223,7 +223,7 @@ Place various form controls and components within a navbar:
   <div class="container-fluid">
     <form class="d-flex">
       <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-      <button class="btn btn-outline-success" type="submit">Search</button>
+      <button class="btn btn-outline btn-success" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -237,7 +237,7 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju
     <a class="navbar-brand">Navbar</a>
     <form class="d-flex">
       <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-      <button class="btn btn-outline-success" type="submit">Search</button>
+      <button class="btn btn-outline btn-success" type="submit">Search</button>
     </form>
   </div>
 </nav>
@@ -261,8 +261,8 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
   <form class="container-fluid justify-content-start">
-    <button class="btn btn-outline-success mr-2" type="button">Main button</button>
+    <button class="btn btn-outline btn-success mr-2" type="button">Main button</button>
-    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
+    <button class="btn btn-sm btn-outline btn-secondary" type="button">Smaller button</button>
   </form>
 </nav>
 {{< /example >}}
@@ -338,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </ul>
         <form class="d-flex">
           <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-info" type="submit">Search</button>
+          <button class="btn btn-outline btn-info" type="submit">Search</button>
         </form>
       </div>
     </div>
@@ -367,7 +367,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </ul>
         <form class="d-flex">
           <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-light" type="submit">Search</button>
+          <button class="btn btn-outline btn-light" type="submit">Search</button>
         </form>
       </div>
     </div>
@@ -396,7 +396,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
         </ul>
         <form class="d-flex">
           <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-primary" type="submit">Search</button>
+          <button class="btn btn-outline btn-primary" type="submit">Search</button>
         </form>
       </div>
     </div>
@@ -512,7 +512,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -542,7 +542,7 @@ With a brand name shown on the left and toggler on the right:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
@@ -572,7 +572,7 @@ With a toggler on the left and brand name on the right:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/album/index.html

@@ -61,8 +61,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -76,8 +76,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -91,8 +91,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -107,8 +107,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -122,8 +122,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -137,8 +137,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -153,8 +153,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -168,8 +168,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>
@@ -183,8 +183,8 @@ title: Album example
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">View</button>
-                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+                  <button type="button" class="btn btn-sm btn-outline btn-secondary">Edit</button>
                 </div>
                 <small class="text-muted">9 mins</small>
               </div>

site/content/docs/4.3/examples/blog/index.html

@@ -20,7 +20,7 @@ include_js: false
         <a class="link-secondary" href="#" aria-label="Search">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
         </a>
-        <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+        <a class="btn btn-sm btn-outline btn-secondary" href="#">Sign up</a>
       </div>
     </div>
   </header>
@@ -149,8 +149,8 @@ include_js: false
       </div><!-- /.blog-post -->
 
       <nav class="blog-pagination">
-        <a class="btn btn-outline-primary" href="#">Older</a>
+        <a class="btn btn-outline btn-primary" href="#">Older</a>
-        <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
+        <a class="btn btn-outline btn-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
       </nav>
 
     </div><!-- /.blog-main -->

site/content/docs/4.3/examples/carousel/index.html

@@ -26,7 +26,7 @@ extra_css:
         </ul>
         <form class="d-flex">
           <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
+          <button class="btn btn-outline btn-success" type="submit">Search</button>
         </form>
       </div>
     </div>

site/content/docs/4.3/examples/dashboard/index.html

@@ -107,10 +107,10 @@ extra_js:
         <h1 class="h2">Dashboard</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
+            <button type="button" class="btn btn-sm btn-outline btn-secondary">Share</button>
-            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+            <button type="button" class="btn btn-sm btn-outline btn-secondary">Export</button>
           </div>
-          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
+          <button type="button" class="btn btn-sm btn-outline btn-secondary dropdown-toggle">
             <span data-feather="calendar"></span>
             This week
           </button>

site/content/docs/4.3/examples/navbar-fixed/index.html

@@ -25,7 +25,7 @@ extra_css:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/navbar-static/index.html

@@ -25,7 +25,7 @@ extra_css:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/offcanvas/index.html

@@ -40,7 +40,7 @@ body_class: "bg-light"
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/pricing/index.html

@@ -14,7 +14,7 @@ include_js: false
     <a class="p-2 text-dark" href="#">Support</a>
     <a class="p-2 text-dark" href="#">Pricing</a>
   </nav>
-  <a class="btn btn-outline-primary" href="#">Sign up</a>
+  <a class="btn btn-outline btn-primary" href="#">Sign up</a>
 </div>
 
 <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
@@ -36,7 +36,7 @@ include_js: false
           <li>Email support</li>
           <li>Help center access</li>
         </ul>
-        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
+        <button type="button" class="btn btn-lg btn-block btn-outline btn-primary">Sign up for free</button>
       </div>
     </div>
     <div class="card mb-4 shadow-sm">

site/content/docs/4.3/examples/product/index.html

@@ -24,7 +24,7 @@ extra_css:
   <div class="col-md-5 p-lg-5 mx-auto my-5">
     <h1 class="display-4 font-weight-normal">Punny headline</h1>
     <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
-    <a class="btn btn-outline-secondary" href="#">Coming soon</a>
+    <a class="btn btn-outline btn-secondary" href="#">Coming soon</a>
   </div>
   <div class="product-device shadow-sm d-none d-md-block"></div>
   <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>

site/content/docs/4.3/examples/starter-template/index.html

@@ -34,7 +34,7 @@ extra_css:
       </ul>
       <form class="d-flex">
         <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-outline btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>

site/content/docs/4.3/examples/sticky-footer-navbar/index.html

@@ -29,7 +29,7 @@ body_class: "d-flex flex-column h-100"
         </ul>
         <form class="d-flex">
           <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
+          <button class="btn btn-outline btn-success" type="submit">Search</button>
         </form>
       </div>
     </div>

site/content/docs/4.3/forms/input-group.md

@@ -127,25 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button" id="button-addon2">Button</button>
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -153,7 +153,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-outline btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -166,7 +166,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-outline btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu dropdown-menu-right">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -177,7 +177,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 </div>
 
 <div class="input-group">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-outline btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action before</a></li>
     <li><a class="dropdown-item" href="#">Another action before</a></li>
@@ -186,7 +186,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
     <li><a class="dropdown-item" href="#">Separated link</a></li>
   </ul>
   <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+  <button class="btn btn-outline btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
   <ul class="dropdown-menu dropdown-menu-right">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -201,8 +201,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline btn-secondary">Action</button>
-  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -217,8 +217,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline btn-secondary">Action</button>
-  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-right">
@@ -259,7 +259,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -275,7 +275,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -305,7 +305,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <div class="form-file">
     <input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
     <label class="form-file-label" for="inputGroupFile03">
@@ -323,7 +323,7 @@ Input groups include support for custom selects and custom file inputs. Browser
       <span class="form-file-button">Browse</span>
     </label>
   </div>
-  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
+  <button class="btn btn-outline btn-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
 

site/layouts/partials/home/masthead-followup.html

@@ -8,7 +8,7 @@
   <p class="lead lead-lg mw-md-75 mx-auto">
     Include Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.
   </p>
-  <a class="btn btn-lg btn-outline-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
+  <a class="btn btn-lg btn-outline btn-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
   <div class="text-left mx-md-5 px-md-5">
     {{ highlight "npm install bootstrap" "sh" "" }}
     {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
@@ -23,7 +23,7 @@
   <p class="lead lead-lg mw-md-75 mx-auto">
     Use the <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> to deliver fast, cached, and compiled versions of Bootstrap’s CSS and JavaScript. No jQuery is required, but don't forget to include Popper.js for some components.
   </p>
-  <a class="btn btn-lg btn-outline-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
+  <a class="btn btn-lg btn-outline btn-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
   <div class="text-left mx-md-5 px-md-5">
     <h5>CSS only</h5>
     {{ highlight (printf (`<link rel="stylesheet" href="%s" integrity="%s" crossorigin="anonymous">`) .Site.Params.cdn.css .Site.Params.cdn.css_hash) "html" "" }}
@@ -42,7 +42,7 @@
   <p class="lead lead-lg mw-md-75 mx-auto">
     Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
   </p>
-  <a class="btn btn-lg btn-outline-primary mb-4" href="{{ .Site.Params.themes }}">Browse themes</a>
+  <a class="btn btn-lg btn-outline btn-primary mb-4" href="{{ .Site.Params.themes }}">Browse themes</a>
   <div class="mx-5 border-bottom">
     <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
                                                 /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"

site/layouts/partials/home/masthead.html

@@ -15,7 +15,7 @@
 
         <div class="d-flex flex-column flex-md-row">
           <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
-          <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ .Site.Params.current_version }}');">Download</a>
+          <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline btn-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ .Site.Params.current_version }}');">Download</a>
         </div>
         <hr class="half-rule">
         <p class="text-muted mb-0">