Focus Demo: the white-outline problem

Let's say we want to style our links (or buttons) as flat blue buttons, with white text. We haven't tried to suppress the outline style from the browser. It's not always easy to tell when they are in focus - it varies from one web browser to another:

• Firefox: the default outline is a dotted line the same colour as the link text. This doesn't stand out against the page background, which is also white.i
• Chrome: as of version 55, the default outline is a pale grey colour. This is not a very good contrast against the white background of the page, or the blue background of the button. Earlier versions of Chrome used an orange default outline colour.
• Chromium: as of version 55, the default outline is a pale blue colour. This is a better contrast against the white background of the page, but it is still not distinct from the blue background of the button.

Here is a link with default browser style: BBC News.

Here is a link which is styled like a button: Google

Here is an actual button element. Shuffle

Here is a link with default browser style: BBC Sport.

Specify the outline-color property.

To make the focus clearer, the next set of buttons have explicit outline styles. The outline colour is chosen to stand out against the PAGE background and it there is an outline offset, so it appears like a separate ring around the button.

Here is a link which is styled like a button: Bing

Here is an actual button element. Yes!

Here is a link with default browser style: BBC Weather.