diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 0a8eaa9b648a..1231491bc9a6 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -7,16 +7,19 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  color: $body-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
+  background-color: transparent;
   border: $btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
   // Share hover and focus styles
   @include hover-focus {
+    color: $body-color;
     text-decoration: none;
   }
 
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 06ad6772fa4b..646f473b3db6 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -56,8 +56,6 @@
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
   color: $color;
-  background-color: transparent;
-  background-image: none;
   border-color: $color;
 
   &:hover {