Button links

What is it?

This new link style helps you highlight important calls-to-action using touchscreen-friendly coloured buttons.

The colour of the buttons matches the section of the website that your website is located in.

How to add a button link

  1. Button link example

    If you are changing an existing text link to a button link then right click it and select Edit link. If you are creating a new link then insert a link as normal on your page, right click it and select Edit link
  2. Choose the Link Style tab in the popup window
  3. Select 'Button' or 'Standard' from the dropdown
  4. Click OK

Things to consider

  • Save the button style links for your most important calls to action. A page with several buttons on could be confusing for someone and mean that none of your links stand out
  • Make sure the text within your button is standard P text. The H1, H2 etc styles of text don't look very good as buttons
  • The same guidance for standard text links applies to the text you put in buttons:
    • Do use descriptive words that tells people what they get when they click and makes sense when read in isolation
    • Don't use 'Click here'
    • Don't just paste in the web address as your link text
    • Don't put too much text in your buttons. A few words is usually enough
    • Don't put a link button in the middle of a sentence of text - it doesn't look very good and breaks the line spacing
  • You should generally put a link button on a new line, unless you are putting multiple buttons next to each other
  • Use a button link at the top of a list of normal text links if you wish to highlight one main link over the other secondary links
  • You can use the return and shift key combination to put smaller spacing between buttons