如果使用
<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;}<a id="btn" href="#btn">Demo</a>注意的使用
:target; 这是通过散列指定元素时应用的样式。这也意味着您的HTML将需要这样：
<a id="btn"href="#btn">Demo</a>一个以自身为目标的链接。和演示
另外，作为脚注：这实际上应该使用Javascript并从元素中应用/删除CSS类来完成。这将不那么令人费解。
