要实现带有多种状态的按钮效果，可以使用 CSS 的伪类选择器。常用的伪类选择器有 :hover（鼠标悬停）、:active（激活状态）、:focus（获得焦点状态）等。
以下是一个简单的例子：
/* 默认状态 */
.button {
background-color: #f2f2f2;
color: #333;
border: 1px solid #ccc;
}
/* 悬停状态 */
.button:hover {
background-color: #ccc;
color: #fff;
border: 1px solid #999;
}
/* 激活状态 */
.button:active {
background-color: #999;
color: #fff;
border: 1px solid #666;
}
/* 获得焦点状态 */
.button:focus {
outline: none;
box-shadow: 0 0 5px #ccc;
}在上面的例子中，.button 类代表按钮的默认状态，它有一个灰色的背景、黑色的字体和灰色的边框。当鼠标悬停在按钮上时，使用 :hover 伪类选择器，改变按钮的背景色、字体颜色和边框。当按钮被点击时，使用 :active 伪类选择器，改变按钮的背景色、字体颜色和边框。当按钮获得焦点时，使用 :focus 伪类选择器，添加一个灰色的阴影框。
除了上面的伪类选择器外，还有很多其他的伪类选择器可以使用，如:checked（选中状态）、:disabled（禁用状态）等。可以根据实际需求来选择使用哪些伪类选择器。