我想创建按钮，改变它的样式，当它被按下。这是我的CSS代码：
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
只有当我点击&握住它。我想让它改变风格后，按下。例如，正常状态将是白色的，被点击的状态将是绿色的，并且在点击被释放之后它将是红色的。
解决方法
如果您使用< a>标签而不是按钮。我知道这不是你要求的，但它可能给你一些其他选择，如果你找不到一个解决方案：
借用从另一个答案演示在这里我产生这：
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
注意使用：target;这将是通过哈希定位元素时应用的样式。这也意味着您的HTML将需要这样：< a id =“btn”href =“#btn”>演示< / a>链接定位本身。和演示http://jsfiddle.net/rlemon/Awdq5/4/
感谢@BenjaminGruenbaum这里是一个更好的演示：http://jsfiddle.net/agzVt/
此外，作为脚注：这应该真正使用JavaScript和应用/从元素中删除CSS类。这将不那么复杂。
