_inverted-button.scss

$button-shadow-size: $govuk-border-width-form-element;
$app-button-inverted-background-colour: govuk-colour("white");
$app-button-inverted-foreground-colour: govuk-colour("blue");
$app-button-inverted-shadow-colour: govuk-shade($app-button-inverted-foreground-colour, 30%);
$app-button-inverted-hover-background-colour: govuk-tint($app-button-inverted-foreground-colour, 90%);

.app-button--inverted,
.app-button--inverted:link,
.app-button--inverted:visited {
  color: $app-button-inverted-foreground-colour;
  background-color: $app-button-inverted-background-colour;
  box-shadow: 0 $button-shadow-size 0 $app-button-inverted-shadow-colour;
}

.app-button--inverted:hover {
  color: $app-button-inverted-foreground-colour;
  background-color: $app-button-inverted-hover-background-colour;
}

.app-button--inverted:focus:not(:hover) {
  color: $govuk-focus-text-colour;
  background-color: $govuk-focus-colour;
}

.app-button--inverted:active,
.app-button--inverted:focus {
  border-color: $govuk-focus-colour;
  color: $app-button-inverted-foreground-colour;
  background-color: $app-button-inverted-hover-background-colour;
  box-shadow: inset 0 0 0 2px $govuk-focus-colour;
}