在网页开发中，按钮是常用的交互元素之一。在用户点击按钮后，我们通常会希望按钮发生一些视觉上的变化，以给用户反馈，告诉他们他们的操作已经被成功执行。其中一种常见的变化是，按钮在被选中（clicked）后，改变颜色。

这种效果可以使用 CSS 来实现。我们可以在我们的样式表中定义一个按钮的类，例如：

.button {background-color: #007bff;color: #fff;padding: 10px;border: none;border-radius: 5px;}

这定义了一个类名为button的按钮样式，它有一个蓝色的背景，白色的文字颜色，圆角的边框，以及适当的内边距。

为了在按钮被选中后改变颜色，我们可以使用 CSS 中的:active伪类。这个伪类匹配一个元素在被用户激活时（例如，当用户按住鼠标按钮点击按钮时）应用的样式。例如，我们可以将我们的按钮类扩展为：

.button {background-color: #007bff;color: #fff;padding: 10px;border: none;border-radius: 5px;}.button:active {background-color: #0056b3;}

这将使按钮在被选中（点击）时变为更深的蓝色。

除了:active伪类外，CSS 还提供了其他伪类，例如:hover、:focus等等。使用这些伪类，我们可以为我们的按钮添加更多的交互效果。