CSS是前端开发必须要掌握的技能之一，它可以通过样式的设置，让网站更具有吸引力和易读性。需要让网站与用户产生交互的按钮更是CSS中的重点，让我们来一起看看如何通过CSS使按钮点击后变色。
button:hover {
background-color: #ff0000;
}
在上面的代码中，我们通过:hover伪类选择器来表示当鼠标悬浮在按钮上时的样式，我们将背景颜色设置为#ff0000，这样鼠标悬浮在按钮上时，按钮的背景颜色就会变为红色。
button:active {
background-color: #00ff00;
}
与:hover伪类选择器不同，:active仅适用于当按钮被激活且仍处于被激活状态的样式。这里我们将背景颜色设置为#00ff00，这样当用户点击按钮时，按钮的背景颜色就会变为绿色。
以上两个伪类选择器是CSS中用来控制按钮点击后样式的最基础方法。虽然它们很简单，但是在实际开发中却非常实用。我们可以根据自己的需求来自定义伪类选择器，从而获得更丰富的按钮交互体验。
