css 点击后的颜色变化 |divcss做表格

button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
/* 鼠标悬停时的效果 */
button:hover {
background-color: darkblue;
}
/* 点击时的效果 */
button:active {
background-color: red;
}

以上代码设置了一个按钮的样式。当用户将鼠标悬停在按钮上方时，背景颜色会变成深蓝色。当用户单击按钮时，背景颜色会变成红色。这种颜色变化效果可以让网页的用户交互更加生动，也可以帮助用户更清晰地知道哪些元素是当前激活状态。

除了按钮外，其他元素也可以通过相似的方式进行颜色变化。下面是一个示例代码，可以用来让某个链接被点击后变成红色：

a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: black;
}
a:active {
color: red;
}

通过使用这些CSS样式，可以让网页中的元素在用户交互时呈现出不同的颜色效果，从而让用户体验更加丰富。