点击按钮后如何保持正常样式

Question

下面是我的html和css，它的工作非常好

当前行为是按下按钮时，背景颜色为预期的绿色，释放按钮后，背景颜色为黄色。但这里我希望背景颜色是蓝色（正常状态）。

我不能删除：焦点，因为在键盘选项卡，应该按预期工作。

还有什么选择器，我必须使用更改按钮的背景颜色为蓝色后，释放鼠标…

注意：-我不想要Jquery或javascript解决方案，我只期望css更改。

null

button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}

<button>hello</button>

null

Answer 1

一个想法是考虑一个额外的包装器，它将获得单击而不是按钮。诀窍是创建一个透明层上面使用伪元素，你仍然可以有焦点使用键盘。

如果按钮附加了任何单击处理程序，则需要将其移动为span

null

button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}

span {
  display:inline-block;
  position:relative;
}
span:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
}

<span><button>hello</button></span>