如何在 CSS 中设置点击按钮的样式

Question

我查看了 W3 学校网站 W3Schools ，其中解释了使用 CSS 设计按钮样式。单击时我需要指定按钮样式。这个的伪类选择器是什么？例如悬停按钮是：

 .button:hover{
}

原文由 user7945230 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此按钮最初将显示为黄色。悬停时它会变成橙色。当你点击它时，它会变成红色。我使用 :hover 和 :focus 来调整样式。 （:active 选择器通常用于链接（即 <a> 标签））

 button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}

 <button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>

原文由 Rachel Gallen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你只是想让按钮在按下鼠标时有不同的样式，你可以使用 :active 伪类。

 .button:active {
}

另一方面，如果您希望在单击后保留样式，则必须使用 javascript。

原文由 Alexandros Panagiotakis 发布，翻译遵循 CC BY-SA 3.0 许可协议