在网页设计中，CSS样式是非常重要的一部分。通过CSS样式，我们可以为网页添加各种各样的效果，比如说改变字体、字号、颜色等等。其中之一的样式就是点击后变色。下面是一段简单的CSS代码实现点击后变色的效果：

button {
background-color: blue;
color: white;
}
button:hover {
background-color: red;
color: white;
}
button:active {
background-color: green;
color: white;
}

上面的代码分别定义了button标签在不同状态下的颜色。在默认状态下，背景颜色为蓝色，字体为白色。当鼠标悬停在button标签上时，背景颜色变为红色。当用户点击该按钮时，背景颜色变为绿色。

需要注意的是，:hover表示当鼠标悬停在该标签上时触发的状态，:active表示当用户点击该标签时触发的状态。通过使用这两个伪类，我们就可以非常方便地为网页添加点击后变色的效果。