diff --git a/changelog.d/focus.fix b/changelog.d/focus.fix
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/button.style.js b/src/components/button.style.js
index fb5d30b64..ad22f290b 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -9,7 +9,7 @@ export default {
     // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
-    focused: ':focus-visible',
+    focused: ':focus-within',
     pressed: ':focus:active',
     hover: ':hover:not(:disabled)',
     disabled: ':disabled'
@@ -89,6 +89,13 @@ export default {
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
+    {
+      state: ['toggled', 'focused'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+      }
+    },
     {
       state: ['toggled', 'disabled'],
       directives: {