CSS按钮是网站设计中常用的元素，可以用来实现页面中的交互效果。在按钮上应用鼠标悬停效果可以让用户更直观地感受到按钮的可点击性。下面是一个简单的例子：

.button {display: inline-block;padding: 10px;border: 1px solid #ccc;background-color: #fff;color: #000;text-decoration: none;}.button:hover {background-color: #f00;color: #fff;}

在上面的代码中，我们定义了一个类名为.button的样式，这个样式应用在我们的按钮标签上。实际上，这个样式包含了按钮的基本样式：display: inline-block;让按钮水平排列，padding: 10px;给按钮设置了内边距，border: 1px solid #ccc;设置了边框，background-color: #fff;是按钮的默认背景颜色，color: #000;是按钮的默认文字颜色，text-decoration: none;则去掉了链接的下划线。

接下来，我们使用伪类选择器:hover，当用户鼠标悬停在按钮上时，将会应用在按钮上。在.button:hover中，我们设置了鼠标悬停时的背景颜色为红色，文字颜色为白色。

通过这个简单的例子，我们可以看到在 CSS 中，使用伪类选择器来修改元素的样式非常方便。我们只需要定义一个基本样式，然后再使用伪类选择器来设置悬停效果即可。这种方式可以有效地减少代码的冗余，让页面代码更加简洁明了。