Fix unrecognisable buttons when changing colours

When overwriting colours via browser settings,
Firefox always defaults buttons to a transparent background
and IE defaults to a grey background,
irrespective of said settings.
That makes buttons appear just as normal text
being a bit off kilter (due to the button padding).

To make them appear a bit more button-y again,
this adds a transparent outline
which is invisible in normal browser settings.

stylesheets/design-patterns/_buttons.scss

@@ -30,6 +30,8 @@
   padding: .526315em .789473em .263157em; // 10px 15px 5px
   border: none;
   @include border-radius(0);
+  outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers
+  outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template
   -webkit-appearance: none;
 
   // Bottom edge effect