GOV.UK elements Buttons

Use buttons to move though a transaction, aim to use only one button per page.


Button text

Button text should be short and describe the action the button performs.

    <input class="button" type="submit" value="Save and continue">


Start now button

Launch your service with a Start now button.

    <a class="button button-start" href="#" role="button">Start now</a>


Button alignment

Align the primary action button to the left edge of your form, in the user’s line of sight.

Disabled buttons

    <input class="button" type="submit" value="Save and continue" disabled="disabled" aria-disabled="true">


Creating buttons

Use the GOV.UK Sass button mixin – find this in the GOV.UK frontend toolkit buttons.scss file.


  • #00823B
  • $button-colour


  • #FFBF47
  • $focus-colour

Discuss navigation buttons on the design patterns Hackpad