css - 按下的<按钮>选择器

Question

我想创建一个 button，当它被按下时它会改变它的样式。这是我的 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;
}

<button>Button</button>

只有当我点击并按住它时它才会改变。我想让它在按下后改变样式。例如，正常状态为白色，点击状态为绿色，释放点击后为红色。

Answer 1

如果您使用 <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>以自身为目标的链接。和演示 http://jsfiddle.net/rlemon/Awdq5/4/

感谢@BenjaminGruenbaum 这里有一个更好的演示:http://jsfiddle.net/agzVt/

_{此外，作为脚注:这实际上应该使用 JavaScript 并从元素中应用/删除 CSS 类来完成。这样就不会那么复杂了。}