diff --git a/CHANGELOG.md b/CHANGELOG.md
index bfc7b11eb..3595fa37a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:new: **New features**
+
+- Add styles for NHS login buttons ([PR 992](https://github.com/nhsuk/nhsuk-frontend/pull/992))
+
 ## 8.3.0 - 24 July 2024
 
 :new: **New features**
diff --git a/app/components/button/login-reverse.njk b/app/components/button/login-reverse.njk
new file mode 100644
index 000000000..40914dada
--- /dev/null
+++ b/app/components/button/login-reverse.njk
@@ -0,0 +1,24 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'NHS login button' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<section style="background-color: #005eb8;">
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Continue",
+            "classes": "nhsuk-button--login-reverse"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+</section>
+
+{% endblock %}
diff --git a/app/components/button/login.njk b/app/components/button/login.njk
new file mode 100644
index 000000000..64674cc55
--- /dev/null
+++ b/app/components/button/login.njk
@@ -0,0 +1,22 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'NHS login button' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Continue",
+            "classes": "nhsuk-button--login"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
index d384727bd..48fdc8d9e 100644
--- a/app/pages/examples.njk
+++ b/app/pages/examples.njk
@@ -35,6 +35,8 @@
     <li><a href="../components/button/secondary.html">Button secondary</a></li>
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
     <li><a href="../components/button/warning.html">Button warning</a></li>
+    <li><a href="../components/button/login.html">Button - NHS login</a></li>
+    <li><a href="../components/button/login-reverse.html">Button - NHS login reverse</a></li>
     <li><a href="../components/card/basic-card.html">Card - Basic card</a></li>
     <li><a href="../components/card/card-with-image.html">Card - Card with an image</a></li>
     <li><a href="../components/card/card-group.html">Card - Card group</a></li>
diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss
index 9d74c55f1..2cfde4276 100644
--- a/packages/components/button/_button.scss
+++ b/packages/components/button/_button.scss
@@ -207,6 +207,75 @@ $button-shadow-size: 4px;
   }
 }
 
+.nhsuk-button--login {
+  background-color: $nhsuk-login-button-color;
+  box-shadow: 0 $button-shadow-size 0 $nhsuk-login-button-shadow-color;
+
+  &:hover {
+    background-color: darken($nhsuk-login-button-color, 10%);
+  }
+
+  &:focus {
+    background: $nhsuk-focus-color;
+    box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color;
+    color: $nhsuk-focus-text-color;
+    outline: $nhsuk-focus-width solid transparent;
+  }
+
+  &:active {
+    background: $nhsuk-login-button-active-color;
+    box-shadow: none;
+    color: $nhsuk-button-text-color;
+    top: $button-shadow-size;
+  }
+
+  &.nhsuk-button--disabled {
+    background-color: $nhsuk-login-button-color;
+  }
+}
+
+.nhsuk-button--login-reverse {
+  background-color: $nhsuk-login-reverse-button-color;
+  box-shadow: 0 $button-shadow-size 0 $nhsuk-login-reverse-button-shadow-color;
+  color: $nhsuk-login-reverse-button-text-color;
+
+  &:hover {
+    background-color: darken($nhsuk-login-reverse-button-color, 5%);
+    color: $nhsuk-login-reverse-button-text-color;
+  }
+
+  &:focus {
+    background: $nhsuk-focus-color;
+    box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color;
+    color: $nhsuk-focus-text-color;
+    outline: $nhsuk-focus-width solid transparent;
+  }
+
+  &:active {
+    background: $nhsuk-login-reverse-button-active-color;
+    box-shadow: none;
+    color: $color_nhsuk-white;
+    top: $button-shadow-size;
+  }
+
+  &:link {
+    color: $nhsuk-login-reverse-button-text-color;
+
+    &:active {
+      color: $nhsuk-login-reverse-button-color;
+    }
+  }
+
+  &.nhsuk-button--disabled {
+    background-color: $nhsuk-login-reverse-button-color;
+
+    &:focus {
+      background-color: $nhsuk-login-reverse-button-color;
+    }
+  }
+}
+
+
 /**
  * Button disabled states
  */
diff --git a/packages/core/settings/_colours.scss b/packages/core/settings/_colours.scss
index ab7a70892..f6d5b45d7 100644
--- a/packages/core/settings/_colours.scss
+++ b/packages/core/settings/_colours.scss
@@ -156,5 +156,16 @@ $nhsuk-warning-button-hover-color: shade($nhsuk-warning-button-color, 20%);
 $nhsuk-warning-button-active-color: shade($nhsuk-warning-button-color, 50%);
 $nhsuk-warning-button-shadow-color: shade($nhsuk-warning-button-color, 50%);
 
+$nhsuk-login-button-color: $color_nhsuk-blue;
+$nhsuk-login-button-hover-color: shade($nhsuk-login-button-color, 20%);
+$nhsuk-login-button-active-color: shade($nhsuk-login-button-color, 50%);
+$nhsuk-login-button-shadow-color: shade($nhsuk-login-button-color, 50%);
+
+$nhsuk-login-reverse-button-color: $color_nhsuk-white;
+$nhsuk-login-reverse-button-hover-color: shade($nhsuk-login-reverse-button-color, 20%);
+$nhsuk-login-reverse-button-active-color: $color-nhsuk-black;
+$nhsuk-login-reverse-button-shadow-color: shade($color_nhsuk-blue, 50%);
+$nhsuk-login-reverse-button-text-color: $color_nhsuk-blue;
+
 $nhsuk-button-text-color: $color_nhsuk-white;
 $nhsuk-reverse-button-text-color: $color_nhsuk-black;