From 7830d704f5f7ebc9a863b131a25f635340beef3a Mon Sep 17 00:00:00 2001
From: Alistair Laing <alistair.laing@digital.cabinet-office.gov.uk>
Date: Wed, 8 May 2019 09:07:57 +0100
Subject: [PATCH] Ensure that button looks like its being pressed in

---
 src/components/button/_button.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index f91db843f3..0cffac4c01 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -93,10 +93,14 @@
     &:focus {
       color: govuk-colour("black");
       background-color: govuk-colour("yellow");
-      box-shadow: 0 4px 0 govuk-colour("black");
+      box-shadow: 0 2px 0 govuk-colour("black");
     }
 
     &:active {
+      // Bump the button down by 2px so it looks like its being pressed in
+      position: relative;
+      top: 2px;
+
       border: $govuk-border-width-form-element solid govuk-colour("yellow");
       color: govuk-colour("white");
       background-color: $govuk-button-hover-colour;
@@ -198,7 +202,7 @@
     &:focus {
       color: govuk-colour("black");
       background-color: govuk-colour("yellow");
-      box-shadow: 0 4px 0 govuk-colour("black");
+      box-shadow: 0 2px 0 govuk-colour("black");
     }
   }
 
@@ -235,7 +239,7 @@
     &:focus {
       color: govuk-colour("black");
       background-color: govuk-colour("yellow");
-      box-shadow: 0 4px 0 govuk-colour("black");
+      box-shadow: 0 2px 0 govuk-colour("black");
     }
   }