How to have a css outline on a <button> tag, only by tab, but not on click?

Question

We have some buttons, which are styled with css and have some icons like this:

This button has as default outline property, so that everytime we click on it, it has an outline (in chrome blue):

to get rid of it, we can of course overwrite this property like:

outline: none

but then when we tab through and reach this button, it will also not have any outline, which is a bad practice for accesibility.

Can we achive this so that this outline appears only when we come on this button with tab, but not when we click on it?

Just as info: We have also some a tags which seems visually just like that, and with a tags we have exact this behaviour we want, outlines appear only when we tab on to that link, but not on click. We just want to have exact same behaviour with button tags also.

Answer 1

When you click on an element it casts :active on it, so you want to chain :active and :focus together:

button:active:focus {
  outline: none;
}

<button>Button</button>

As you said this doesnt work with additional css, in this case you have to implement a bit complicated solution, where you add class to body when user uses tab for a first time, otherwise you remove outlines all together

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

body:not(.user-is-tabbing) button:focus {
  outline: none;
}

button {
    background-color: red;
}

<button>Button</button>

Answer 2

Can we achive this so that this outline appears only when we come on this button with tab, but not when we click on it?

Yes you can by using :focus-visible.

If you want an outline to appear when button is tabbed and not clicked, set outline: none on the button on :focus but not on :focus-visible:

button:focus:not(:focus-visible) {
  outline: none;
}