Outline as focus state

How to use it

Add an outline around an element and make it obvious, when that element is focused.

When to use it

If you want to create a focus state for elements like buttons, for example when someone is tabbing between elements, you can use an outline. The style I see most often is a soft blue outline, which is what I've recreated below.

You could make this a brand colour, however, if you wanted to add more of those to your design.

What to watch out for

The focus state should stand out, and be obvious, since it shows the user where the input focus has moved to. Depending on how the website is built, the next element to get focus might not be the closest element, so obvious focus states are important.

Examples

Example