Add an example of inverse buttons to the guide

The $button-shadow-size variable in the upstream commit caused some Sass
compilation problems because it's using the old / format rather than
math.div, so that value is hardcoded to 2px.

guide/content/form-elements/submit.slim

@@ -23,6 +23,10 @@ p.govuk-body
   caption: 'Generating a warning submit button',
   code: warning_button)
 
+== render('/partials/example.*',
+  caption: 'Generating submit button with inverted colours',
+  code: inverse_button)
+
 == render('/partials/example.*',
   caption: 'Generating a submit button with a custom class',
   code: custom_classes_button)

guide/content/stylesheets/application.scss

@@ -54,3 +54,37 @@ $x-govuk-brand-colour: #28a;
     background: govuk-tint(govuk-colour("purple"), 10%);
   }
 }
+
+// inverse buttons, this can be removed once the functionality is supported by
+// the design system. https://github.com/alphagov/govuk-frontend/pull/3556
+$govuk-inverse-button-colour: govuk-colour("white");
+$govuk-inverse-button-text-colour: govuk-colour("blue");
+$govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
+$govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
+
+.govuk-button--inverse {
+  background-color: $govuk-inverse-button-colour;
+  box-shadow: 0 2px 0 $govuk-inverse-button-shadow-colour;
+
+  &,
+  &:link,
+  &:visited,
+  &:active,
+  &:hover {
+    color: $govuk-inverse-button-text-colour;
+  }
+
+  @include _govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-inverse-button-text-colour;
+    }
+  }
+
+  &:hover {
+    background-color: $govuk-inverse-button-hover-colour;
+
+    &[disabled] {
+      background-color: $govuk-inverse-button-colour;
+    }
+  }
+}

guide/lib/examples/submit.rb

@@ -12,6 +12,10 @@ def warning_button
       "= f.govuk_submit 'Delete all records', warning: true"
     end
 
+    def inverse_button
+      "= f.govuk_submit 'Find out more', inverse: true"
+    end
+
     def custom_classes_button
       "= f.govuk_submit 'Big purple button', class: 'big-purple-button'"
     end