diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c13f3895346e..d4a089f771cb 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -69,9 +69,9 @@
 
 @mixin button-outline-variant(
   $color,
-  $color-hover: color-yiq($hover-background),
-  $hover-background: mix($color, #FFF, 10%),
-  $hover-border: $color,
+  $color-hover: color-level($color, 2),
+  $hover-background: rgba($color, .1),
+  $hover-border: color-level($color, 2),
   $active-background: $color,
   $active-border: $color,
   $active-color: color-contrast($active-background)