如何在<button>标签上使用css大纲,只能通过标签,但不能点击？

我们有一些按钮,用css设置样式,并有一些像这样的图标:

此按钮具有默认的轮廓属性,因此每次我们点击它时,它都有一个轮廓(镀铬蓝色):

为了摆脱它,我们当然可以覆盖这个属性,如:

outline: none

但是当我们选中并触及此按钮时,它也没有任何轮廓,这对于可访问性来说是一种不好的做法.

我们能否实现这一点,以便只有当我们使用标签来显示此按钮时才显示此轮廓,但是当我们点击它时却不会出现？

正如信息:我们也有一些一个似乎在视觉上就这样的标签,并用标签,我们有确切的这种行为,我们希望,轮廓似乎只有当我们到那个链接选项卡,但不能点击.我们只想与按钮标签具有完全相同的行为.

当你点击一个元素它转换:active就可以了,所以你想链:active和:focus在一起:

button:active:focus {
  outline: none;
}

Button