diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
index dcf5dbf570f..3a03c0f4567 100644
--- a/packages/bootstrap/scss/button/_variables.scss
+++ b/packages/bootstrap/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the button.
 /// @group button
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
index 9243b2e3ff7..9602259bd5c 100644
--- a/packages/classic/scss/button/_variables.scss
+++ b/packages/classic/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button
diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
index be56b5809fa..c53267309a7 100644
--- a/packages/default/scss/button/_layout.scss
+++ b/packages/default/scss/button/_layout.scss
@@ -181,7 +181,7 @@
 
         &:focus::after,
         &.k-focus::after {
-            opacity: .12;
+            opacity: $kendo-flat-button-focus-ring-opacity;
         }
     }
 
diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
index 11e4cd00387..d70a30ffe56 100644
--- a/packages/default/scss/button/_variables.scss
+++ b/packages/default/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button
diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
index dc059ab93a5..200534a7208 100644
--- a/packages/material/scss/button/_variables.scss
+++ b/packages/material/scss/button/_variables.scss
@@ -221,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .22 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: null !default;
 
 /// The transition of the button.
 /// @group button