Adding the NHS login button to your website or app
With many partners using NHS login, we need to make sure the NHS login button is consistent and recognisable.
We will have regular checks with you to make sure you are aligning to these guidelines. We will also review the placement and visibility of the NHS login button on your website or app.
All references to NHS login must be with a lower case L.
To integrate with, or continue using NHS login on your website or app, you will need to provide evidence that you align to these guidelines.
If you fail to comply and we cannot agree a solution, we may ask you to remove NHS login from your website or app.
User journey behind the button
Open this user journey flow in new window
After a user enters their email, NHS login will check if they are already registered. If they are not, they will need to register.
If they are registered, they can enter their password. NHS login then checks which level of verification they have and matches that against the level your website or app is requesting.
If the user does not have the same or a higher level of verification, NHS login will help the user gain that level of verification in the same journey.
View NHS login user journeys for more detail.
Important:
Do not tell your users what will happen after they select the NHS login button. You cannot guarantee what level of verification they may already have.
NHS login may also introduce new features or change current functionality. For example, not all users will need photo ID to prove their identity to a high level.
The NHS login button
There are three different types of NHS login button. The button you use depends on the type of website or app you have.
NHS services that use the NHS Design System
The NHS Design System uses styles, components and patterns that help to build consistent, accessible user interfaces.
Only NHS services that use the NHS Design System can use this version of the NHS login button, such as NHS App.
View the guidance for NHS services that use the NHS Design System
- This version of the NHS login button has minimal use of the term "NHS login". Instead, we would suggest using 'Continue' as the call to action.
- To align with the NHS Identity Guidelines, there should only be one NHS logo on a screen at once. Do not repeat the NHS logo on the NHS login button.
- To keep the NHS login brand clear, the button should be NHS blue.
- When the NHS login button is on a background that is darker than 50% grey, you should use the light version of the button for legibility. Do not change the colour of the button to anything other than the original and light version.
- We are working with the NHS Design System to create a button that can be a reusable component within the Design System.
How to place this button on your service
The NHS login button must always be visible and up front on your service. When placing the button on your service, it can go anywhere on the screen, but you must follow these rules:
Align to the user's mental model
NHS login has over 40million users and so it is very likely that your users will already have an NHS login account. The easiest route for the user to sign up or log in to your service would be to use their NHS login details.
If you have any other native or third-party log in or register options, the NHS login button must appear as the first option, and always be as clear and visible as other options.
Ideally you should use linked text but if a button is necessary, the secondary button must be used.
If you have a clear user need why this isn't possible, you will need to provide proof of this. We will then review and decide if we can support this.
Add content around the button if needed
Sometimes it may be necessary to add content around the NHS login button to reassure a user what happens when they select it.
Suggested content:
NHS login allows you to access your health and care websites and apps with one set of login details.
We will check if you have an NHS login. If not, you can set one up.
The NHS login button
.nhslogin-button {
font-weight: 400;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 28px;
-webkit-appearance: none;
appearance: none;
background-color: #005eb8;
border: 2px solid transparent;
border-radius: 4px;
box-shadow: 0 4px 0 #003087;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
margin-top: 0;
padding: 12px 16px;
position: relative;
text-align: center;
vertical-align: top;
width: auto;
}
@media (min-width: 40.0625em) {
.nhslogin-button {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.47368;
}
}
@media print {
.nhslogin-button {
font-size: 14pt;
line-height: 1.15;
}
}
@media (min-width: 40.0625em) {
.nhslogin-button {
margin-bottom: 36px;
}
}
@media (max-width: 40.0525em) {
.nhslogin-button {
padding: 8px 16px;
}
}
.nhslogin-button:link,
.nhslogin-button:visited,
.nhslogin-button:active,
.nhslogin-button:hover {
color: #fff;
text-decoration: none;
}
.nhslogin-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.nhslogin-button:hover {
background-color: #1e569b;
}
.nhslogin-button:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: none;
}
.nhslogin-button:active {
background: #1e569b;
box-shadow: none;
color: #fff;
top: 4px;
}
.nhslogin-button::before {
background: transparent;
bottom: -6px;
content: "";
display: block;
left: -2px;
position: absolute;
right: -2px;
top: -2px;
}
.nhslogin-button:active::before {
top: -6px;
}
.nhslogin-button--reverse {
background-color: #fff;
box-shadow: 0 4px 0 #003087;
color: #005eb8;
}
.nhslogin-button--reverse:hover {
background-color: #f2f2f2;
color: #005eb8;
}
.nhslogin-button--reverse:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: 4px solid transparent;
}
.nhslogin-button--reverse:active {
background: #f2f2f2;
box-shadow: none;
color: #005eb8;
top: 4px;
}
.nhslogin-button--reverse:link {
color: #005eb8;
}
.nhslogin-button--reverse.nhsuk-button--disabled {
background-color: #fff;
}
.nhslogin-button--reverse.nhsuk-button--disabled:focus {
background-color: #fff;
}
.nhslogin-button--disabled,
.nhslogin-button[disabled="disabled"],
.nhslogin-button[disabled] {
background-color: #005eb8;
opacity: 0.5;
pointer-events: none;
}
.nhslogin-button--disabled:hover,
.nhslogin-button[disabled="disabled"]:hover,
.nhslogin-button[disabled]:hover {
background-color: #005eb8;
cursor: default;
}
.nhslogin-button--disabled:focus,
.nhslogin-button[disabled="disabled"]:focus,
.nhslogin-button[disabled]:focus {
background-color: #005eb8;
outline: none;
}
.nhslogin-button--disabled:active,
.nhslogin-button[disabled="disabled"]:active,
.nhslogin-button[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.nhslogin-button--reverse[disabled="disabled"],
.nhslogin-button--reverse[disabled] {
background-color: #fff;
opacity: 0.5;
}
.nhslogin-button--reverse[disabled="disabled"]:hover,
.nhslogin-button--reverse[disabled]:hover {
background-color: #fff;
cursor: default;
}
.nhslogin-button--reverse[disabled="disabled"]:focus,
.nhslogin-button--reverse[disabled]:focus {
outline: none;
}
.nhslogin-button--reverse[disabled="disabled"]:active,
.nhslogin-button--reverse[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.ie8 .nhslogin-button:focus {
outline: 1px dotted #003087;
}
Download the NHS login button package for services that use the NHS Design System.
Websites or apps that use the NHS logo
Use this version of the NHS login button if your website or app has the NHS logo visible to users on the same screen as the NHS login button, such as Hey Pharmacist.
If your website or app uses the NHS logo, but it is not on the same screen as the NHS login button, you will need to use the NHS login button version for websites or apps that do not use NHS logo.
View NHS login button guidance for websites or apps that use the NHS logo
- To align with the NHS Identity Guidelines, there should only be one NHS logo on a screen at once. Do not repeat the logo on the NHS login button.
- The call to action on this button should always be Continue to NHS login.
- To keep the NHS login brand clear, the button should be NHS blue.
- When the NHS login button is on a background that is darker than 50% grey, you should use the light version of the button for legibility. Do not change the colour of the button to anything other than the original and light version.
How to place this button on your website or app
The NHS login button must always be visible and up front on your website or app. When placing the button on your website or app, it can go anywhere on the screen, but you must follow these rules:
Align to the user's mental model
NHS login has over 40million users and so it is very likely that your users will already have an NHS login account. The easiest route for the user to sign up or log in to your website or app would be to use their NHS login details.
If you have any other native or third-party log in or register options, the NHS login button must appear as the first option, and always be as clear and visible as other options.
If you have a clear user need why this isn't possible, you will need to provide proof of this. We will then review and decide if we can support this.
Add content around the button if needed
Sometimes it may be necessary to add content around the NHS login button to reassure a user what happens when they select it.
Suggested content:
NHS login allows you to access your health and care websites and apps with one set of login details.
We will check if you have an NHS login. If not, you can set one up.
Avoid placing the button on the same screen as any other forms
The button directs users to the NHS login service that allows users to log in or register. Putting the NHS login button alongside any other entry fields confuses the users, and makes it not clear what their call to action is.
The example shows what to do if there is a clear user need to display a form on the same screen as the NHS login button. You should place NHS login at the top and then create a clear distinction between the NHS login button and your form.
Button sizing and padding
You can scale the button as needed for different devices and screen sizes, but you must keep the aspect ratio the same so that the button is not stretched. When scaling the button, you must ensure that the writing is still clear and readable.
The padding around the NHS login button should always be equal to at least half of its height.
If the width of the button needs to change:
- the padding to the left and right of the button content should be at least 16dp, and equal on both sides
- the padding above and below the button content should always be 14dp
- the shadow below the button should always be 14dp
The NHS login button
.nhslogin-button {
font-weight: 400;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 28px;
-webkit-appearance: none;
appearance: none;
background-color: #005eb8;
border: 2px solid transparent;
border-radius: 4px;
box-shadow: 0 4px 0 #003087;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
margin-top: 0;
padding: 12px 16px;
position: relative;
text-align: center;
vertical-align: top;
width: auto;
}
@media (min-width: 40.0625em) {
.nhslogin-button {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.47368;
}
}
@media print {
.nhslogin-button {
font-size: 14pt;
line-height: 1.15;
}
}
@media (min-width: 40.0625em) {
.nhslogin-button {
margin-bottom: 36px;
}
}
@media (max-width: 40.0525em) {
.nhslogin-button {
padding: 8px 16px;
}
}
.nhslogin-button:link,
.nhslogin-button:visited,
.nhslogin-button:active,
.nhslogin-button:hover {
color: #fff;
text-decoration: none;
}
.nhslogin-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.nhslogin-button:hover {
background-color: #1e569b;
}
.nhslogin-button:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: none;
}
.nhslogin-button:active {
background: #1e569b;
box-shadow: none;
color: #fff;
top: 4px;
}
.nhslogin-button::before {
background: transparent;
bottom: -6px;
content: "";
display: block;
left: -2px;
position: absolute;
right: -2px;
top: -2px;
}
.nhslogin-button:active::before {
top: -6px;
}
.nhslogin-button--reverse {
background-color: #fff;
box-shadow: 0 4px 0 #003087;
color: #005eb8;
}
.nhslogin-button--reverse:hover {
background-color: #f2f2f2;
color: #005eb8;
}
.nhslogin-button--reverse:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: 4px solid transparent;
}
.nhslogin-button--reverse:active {
background: #f2f2f2;
box-shadow: none;
color: #005eb8;
top: 4px;
}
.nhslogin-button--reverse:link {
color: #005eb8;
}
.nhslogin-button--reverse.nhsuk-button--disabled {
background-color: #fff;
}
.nhslogin-button--reverse.nhsuk-button--disabled:focus {
background-color: #fff;
}
.nhslogin-button--disabled,
.nhslogin-button[disabled="disabled"],
.nhslogin-button[disabled] {
background-color: #005eb8;
opacity: 0.5;
pointer-events: none;
}
.nhslogin-button--disabled:hover,
.nhslogin-button[disabled="disabled"]:hover,
.nhslogin-button[disabled]:hover {
background-color: #005eb8;
cursor: default;
}
.nhslogin-button--disabled:focus,
.nhslogin-button[disabled="disabled"]:focus,
.nhslogin-button[disabled]:focus {
background-color: #005eb8;
outline: none;
}
.nhslogin-button--disabled:active,
.nhslogin-button[disabled="disabled"]:active,
.nhslogin-button[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.nhslogin-button--reverse[disabled="disabled"],
.nhslogin-button--reverse[disabled] {
background-color: #fff;
opacity: 0.5;
}
.nhslogin-button--reverse[disabled="disabled"]:hover,
.nhslogin-button--reverse[disabled]:hover {
background-color: #fff;
cursor: default;
}
.nhslogin-button--reverse[disabled="disabled"]:focus,
.nhslogin-button--reverse[disabled]:focus {
outline: none;
}
.nhslogin-button--reverse[disabled="disabled"]:active,
.nhslogin-button--reverse[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.ie8 .nhslogin-button:focus {
outline: 1px dotted #003087;
}
Download the NHS login button package for websites or apps that use NHS branding.
Websites or apps that do not use the NHS logo
Use this version if your website or app does not have the NHS logo on the same screen as the NHS login button, such as eRedbook.
This applies even if your website or app:
- is part of or partnered with the NHS,
- uses the NHS logo or NHS branding in any documentation,
- uses the NHS logo on any other screen except the one in which you place the NHS login button.
View NHS login button guidance for websites or apps that do not use the NHS logo
- To keep the NHS login brand recognisable to users, this button should have the NHS logo and use the call to acton Continue to NHS login.
- To keep the NHS login brand clear, the button should be NHS blue.
- When the NHS login button is on a background that is darker than 50% grey, you should use the light version of the button for legibility. Do not change the colour of the button to anything other than the original and light version.
- If your website or app has it's own branding that you would like to align the NHS login button to, you will need to request a change. We will then review this and decide if we can allow any of your requested changes to the NHS login button. For example, if your website or app uses buttons with straight corners, you might want also want straight corners on the NHS login button. You should contact us as soon as possible if you want to make any changes to the NHS login button. You should not change anything on the button without our approval.
How to place this button on your website or app
The NHS login button must always be visible and up front on your website or app. When placing the button on your website or app, it can go anywhere on the screen, but you must follow these rules:
Align to the user's mental model
NHS login has over 40million users and so it is very likely that your users will already have an NHS login account. The easiest route for the user to sign up or log in to your website or app would be to use their NHS login details.
If you have any other native or third-party log in or register options, the NHS login button must appear as the first option, and always be as clear and visible as other options.
If you have a clear user need why this isn't possible, you will need to provide proof of this. We will then review and decide if we can support this.
Add content around the button if needed
Sometimes it may be necessary to add content around the NHS login button to reassure a user what happens when they select it.
Suggested content:
NHS login allows you to access your health and care websites and apps with one set of login details.
We will check if you have an NHS login. If not, you can set one up.
Avoid placing the button on the same screen as any other forms
The button directs users to the NHS login service that allows users to log in or register. Putting the NHS login button alongside any other entry fields confuses the users, and makes it not clear what their call to action is.
The example shows what to do if there is a clear user need to display a form on the same screen as the NHS login button. You should place NHS login at the top and then create a clear distinction between the NHS login button and your form.
Button sizing and padding
You can scale the button as needed for different devices and screen sizes, but you must keep the aspect ratio the same so that the NHS logo is not stretched. When scaling the button, you must ensure that the writing is still clear and readable.
The padding around the NHS login button should always be equal to at least half of its height.
If the width of the button needs to change:
- there should always be 16dp between the NHS logo and the text on the button
- the padding to the left and right of the button content should be at least 16dp, and equal on both sides
- the padding above and below the button content should always be 14dp
- the shadow below the button should always be 14dp
The NHS login button
<button class="nhslogin-button nhslogin-button-logo" type="submit">
<div class="button-logo">
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="27" width="67" >
<path class="nhsuk-logo__background" fill="#fff" d="M0 0h40v16H0z" </path>
<path class="nhsuk-logo__text" fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6" </path>
</svg>
</div>
Continue to NHS login
</button>.nhslogin-button {
font-weight: 400;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 28px;
-webkit-appearance: none;
appearance: none;
background-color: #005eb8;
border: 2px solid transparent;
border-radius: 4px;
box-shadow: 0 4px 0 #003087;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 600;
margin-top: 0;
padding: 12px 16px;
position: relative;
text-align: center;
vertical-align: top;
width: auto;
}
@media (min-width: 40.0625em) {
.nhslogin-button {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.47368;
}
}
@media print {
.nhslogin-button {
font-size: 14pt;
line-height: 1.15;
}
}
@media (min-width: 40.0625em) {
.nhslogin-button {
margin-bottom: 36px;
}
}
@media (max-width: 40.0525em) {
.nhslogin-button {
padding: 8px 16px;
}
}
.nhslogin-button:link,
.nhslogin-button:visited,
.nhslogin-button:active,
.nhslogin-button:hover {
color: #fff;
text-decoration: none;
}
.nhslogin-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.nhslogin-button:hover {
background-color: #1e569b;
}
.nhslogin-button:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: none;
}
.nhslogin-button:active {
background: #1e569b;
box-shadow: none;
color: #fff;
top: 4px;
}
.nhslogin-button::before {
background: transparent;
bottom: -6px;
content: "";
display: block;
left: -2px;
position: absolute;
right: -2px;
top: -2px;
}
.nhslogin-button:active::before {
top: -6px;
}
.nhslogin-button--reverse {
background-color: #fff;
box-shadow: 0 4px 0 #003087;
color: #005eb8;
}
.nhslogin-button--reverse:hover {
background-color: #f2f2f2;
color: #005eb8;
}
.nhslogin-button--reverse:focus {
background: #ffeb3b;
box-shadow: 0 4px 0 #003087;
color: #003087;
outline: 4px solid transparent;
}
.nhslogin-button--reverse:active {
background: #f2f2f2;
box-shadow: none;
color: #005eb8;
top: 4px;
}
.nhslogin-button--reverse:link {
color: #005eb8;
}
.nhslogin-button--reverse.nhsuk-button--disabled {
background-color: #fff;
}
.nhslogin-button--reverse.nhsuk-button--disabled:focus {
background-color: #fff;
}
.nhslogin-button--disabled,
.nhslogin-button[disabled="disabled"],
.nhslogin-button[disabled] {
background-color: #005eb8;
opacity: 0.5;
pointer-events: none;
}
.nhslogin-button--disabled:hover,
.nhslogin-button[disabled="disabled"]:hover,
.nhslogin-button[disabled]:hover {
background-color: #005eb8;
cursor: default;
}
.nhslogin-button--disabled:focus,
.nhslogin-button[disabled="disabled"]:focus,
.nhslogin-button[disabled]:focus {
background-color: #005eb8;
outline: none;
}
.nhslogin-button--disabled:active,
.nhslogin-button[disabled="disabled"]:active,
.nhslogin-button[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.nhslogin-button--reverse[disabled="disabled"],
.nhslogin-button--reverse[disabled] {
background-color: #fff;
opacity: 0.5;
}
.nhslogin-button--reverse[disabled="disabled"]:hover,
.nhslogin-button--reverse[disabled]:hover {
background-color: #fff;
cursor: default;
}
.nhslogin-button--reverse[disabled="disabled"]:focus,
.nhslogin-button--reverse[disabled]:focus {
outline: none;
}
.nhslogin-button--reverse[disabled="disabled"]:active,
.nhslogin-button--reverse[disabled]:active {
box-shadow: 0 4px 0 #003087;
top: 0;
}
.ie8 .nhslogin-button:focus {
outline: 1px dotted #003087;
}
.nhslogin-button-logo {
display: flex;
align-items: center;
justify-content: center;
}
.button-logo {
padding-right: 16px;
display: flex;
align-items: center;
justify-content: center;
}
Download the NHS login button package for webistes or apps that do not use the NHS logo.
If you use the wrong version of the NHS login button on your website or app, we will ask you to change to the correct one.
Contact us if you are unsure which version of the NHS login is right for your website or app.
Related links
For detailed technical guidance on who can use NHS and NHS Digital identities and how and where to apply them, visit:
Edit this page on GitHub