diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 49d8d18be9..ef623ccd55 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -4,15 +4,15 @@
 // and disabled options for all buttons
 
 @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+  color: color-yiq($background);
   background-color: $background;
   border-color: $border;
-  color: color-yiq($background);
   @include box-shadow($btn-box-shadow);
 
   @include hover {
+    color: color-yiq($active-background);
     background-color: $active-background;
     border-color: $active-border;
-    color: color-yiq($active-background);
   }
 
   &:focus,