diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index c05b4f9fec0..969a3cd1851 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -54,3 +54,31 @@
 .govuk-details__summary:before {
   top: 0;
 }
+
+// Updates to buttons
+.govuk-button {
+  &:focus {
+    border-color: $govuk-focus-colour;
+    // When colours are overridden, for example when users have a dark mode,
+    // backgrounds and box-shadows disappear, so we need to ensure there's a
+    // transparent outline which will be set to a visible colour.
+    // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
+    @include govuk-not-ie8 {
+      outline: $govuk-focus-width solid transparent;
+      outline-offset: 0;
+    }
+    // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
+    @include govuk-if-ie8 {
+      color: $govuk-text-colour;
+      background-color: $govuk-focus-colour;
+    }
+    box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+  }
+
+  &:focus:not(:active):not(:hover) {
+    border-color: $govuk-focus-colour;
+    color: $govuk-text-colour;
+    background-color: $govuk-focus-colour;
+    box-shadow: 0 2px 0 $govuk-focus-text-colour;
+  }
+}