Button

Buttons should be a call-to-action, and link to a webpage where your users can complete that action. You can add an icon to your button to show users the type of action they will be taking.  

It is very important to have good link text for your button so users can read where it will take them, whether visually or with screen reading technologies.  

You can go to our page on Accessible navigation for more advice and practical resources on creating good link text.  

Accessible navigation – Demonstrating EdWeb 2

There are 4 different options to customise your buttons, and each will have a different effect on your page.  

The 'Button inline' option will create a left-aligned button.

The size of the button will depend on the length of your link text, and the button colour will be the same as the chosen theme colour for your site.

The 'Button block' option creates a button that will run the width of your page, with the link text centrally aligned in the button.

The button will change length depending on your user's screen size and will match the chosen theme colour of your site.

The 'Outline button inline' option creates a left-aligned button. The size of the button depends on the length of your link text. This means visitors to your page are more likely to read your link text. 

The button will be white, with the outline and text colour the same as the chosen theme colour of your site. This can be used as a lower priority button option.  

When a visitor hovers their mouse over the button, the colour scheme will invert, making the button your theme colour with white text.  

The option 'Outline button block' creates a button that will run the width of your page, with the link text centrally aligned in the button. The button will change length depending on your user's screen size.  

The button will be white, with the outline and text colour the same as the chosen theme colour of your site. When a visitor hovers their mouse over the button, the colour scheme will invert, making the button your theme colour with white text.  

You can also add extra styling to buttons on your page to make them 'calls-to-action'. 

You should only use this styling when there is a clear, important purpose. You should not use them if there is no consistent system that is used across your whole site> 

We would recommend not having more than 1 or 2 call-to-action buttons on a page. 

The table below shows how button icons can be used for different calls-to-action and how they will display on your webpages.