<p><strong>Click the buttons with a pointing device and focus them with the keyboard using the tab key.</strong></p>
<p>This is the default behavior in browsers without support for <code>:focus-visible</code>. The focus styles appear also on mouse click:</p>
<button>Without :focus-visible</button>
<p>In browsers with support for <code>:focus-visible</code>, focus styles will only be visible on keyboard focus – without the need for a polyfill! Other browsers still show the default <code>:focus</code> styles. Progressive enhancement at work. ;)</p>
<button class="with-focus-visible">With :focus-visible</button>
*, *::before, *::after {
  box-sizing:border-box;
}

body {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #e6e8ea;
  margin: 0;
  padding: 1rem;
}

button {
  display: block;
  margin: 0 0 1rem;
  color: #fff;
  background-color: #303753;
  border: none;
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  border-radius: 0.25em;
  transition: background-color 0.14s ease;
  cursor: pointer; // …or not? ;)
}

button:active {
  transform: translateY(1px);
}

button:focus {
  box-shadow: 0 0 0 3px #dc143f;
  outline: 0;
}

button:hover {
  background-color: #223b9c;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 3px #dc143f;
  outline: 0;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.