diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 5d28922365..e36ff0f1f6 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -23,7 +23,7 @@
   &:focus,
   &.focus {
     outline: 0;
-    box-shadow: 0 0 0 2px rgba($brand-primary, .25);
+    box-shadow: $btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -37,7 +37,7 @@
   &:active,
   &.active {
     background-image: none;
-    @include box-shadow($btn-active-box-shadow);
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e7069f8053..e6cbf63bf5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -367,6 +367,7 @@ $btn-padding-y:                  .5rem !default;
 $btn-line-height:                1.25 !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-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
 $btn-primary-color:              $white !default;