diff --git a/dist/scss/components/_btn_text.scss b/dist/scss/components/_btn_text.scss
index 9d316b474..396bfa7e0 100644
--- a/dist/scss/components/_btn_text.scss
+++ b/dist/scss/components/_btn_text.scss
@@ -34,4 +34,13 @@
       $disabled-color: rgba($value, $btn-disabled-opacity)
     );
   }
+
+  // override the background color of button-outline-variant
+  .btn-outline-#{$color} {
+    @include button-outline-variant(
+      $color: $value,
+      $color-hover: $value,
+      $active-background: rgba($value, 0.10)
+    )
+  }
 }
diff --git a/src/scss/components/_btn_text.scss b/src/scss/components/_btn_text.scss
index 9d316b474..396bfa7e0 100644
--- a/src/scss/components/_btn_text.scss
+++ b/src/scss/components/_btn_text.scss
@@ -34,4 +34,13 @@
       $disabled-color: rgba($value, $btn-disabled-opacity)
     );
   }
+
+  // override the background color of button-outline-variant
+  .btn-outline-#{$color} {
+    @include button-outline-variant(
+      $color: $value,
+      $color-hover: $value,
+      $active-background: rgba($value, 0.10)
+    )
+  }
 }