How to use a Button block

A button highlights a link to the user. A link should be specific, descriptive and front-loaded with relevant terms. Find out how to write an effective and accessible link.

How to use a button

You can link to another page on your site, for example:

Find out how to build your campaign site

You can also link to another website. For accessibility include the name of the site in the link text, for example: 

Find out about how to apply for Universal Credit on the GOV.UK website

Try to avoid links which go to to a specific part of a page (anchor links) as this breaks accessibility guidelines.

Consider if you need to use a button. A link should be added in context, at the point in the content where it’s useful. Often this will be in the text itself and a button will not be needed. 

How to add a Button block

To add a Button block to your page:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘button’.
  3. Click the ‘Buttons’ option.
  4. Enter the text for your link in the yellow box.
  5. Click the button to see its context menu.
  6. Click the ‘Link’ button.
  7. Enter the url of the site you want the button to go to and press ‘return’ on your keyboard.
  8. Click ‘Open in a new tab’ if you want the button to open in a new tab (it will turn blue when selected).

How to change the colour of a button

Available colours for your button are controlled when you set up your site’s colour theme. To select this for your button:

  1. If you can’t see the right settings sidebar, click the black ‘Settings’ button on the top right toolbar.
  2. In the right settings sidebar, click the ‘Block’ tab to make sure it’s selected.
  3. Click the black and white ‘circle’ button to select styles.
  4. Under ‘Color’ click ‘Background’ to change your button’s background colour.
  5. Under ‘Color’ click ‘Text’ to change the colour of the button text to white (if the button’s colour makes the text hard to read).

How to change the width of a button

The width of the button changes to fit the size of your link text. You can also change it to be a specific width, up to a maximum width of 800 pixels. This is ‘100%’ of the minimum accessible screen size.

For example, the button below is 100% width:

Find out how to build your campaign site

To change the width of a button:

  1. If you can’t see the right settings sidebar, click the black ‘Settings’ button on the top right toolbar.
  2. In the right settings sidebar, click the ‘Block’ tab to make sure it’s selected.
  3. Under Width settings click ‘25%’, ‘50%’, ‘75%’ or ‘100%’ to change the width of the button (it will turn blue when selected).
  4. If you want to return to a width based on the button text click the % button again to deselect it.

How to add a button to a banner

You can also add a button in a banner to give it more context and emphasis. The text in this banner can use headings to make it accessible. For example:

Find out what support you might be able to get to help with your living costs. You can get benefits and other financial support if you’re eligible.

Check benefits and financial support you can get

To add a banner with a button and text inside it:

  1. Hover beneath an existing block and click the plus ‘+’ icon to select a block.
  2. Click ‘Browse all’.
  3. Click the ‘Patterns’ tab.
  4. Click ‘Featured’.
  5. Click the grey box to the right ‘GOV.UK Call-to-action’.
  6. Click on the page to deselect the patterns option screen.
  7. Click the text and link to edit them.

A banner is a full-width component and will display incorrectly on desktop screens if you use it on a page with a navigation sidebar. This sidebar appears when you set subpage navigation (hierarchy) on a page. We advise you only use banners on pages without child pages (for example, the home page).

In this section