CSS按钮菜单选中 |css div水平垂直居中

button {
/* 未选中状态样式 */
background-color: #ffffff;
color: #333333;
border: 1px solid #cccccc;
}
button.active {
/* 选中状态样式 */
background-color: #3399ff;
color: #ffffff;
border: 1px solid #3399ff;
}

大家可以通过为选中状态添加样式类来改变按钮菜单的样式。这里以一个简单的按钮菜单为例：

<div class="menu"><button>选项1</button><button class="active">选项2</button><button>选项3</button></div>

以上代码中，在第二个按钮上添加了样式类”active”，实现了选中状态的样式效果。

除此之外，大家还可以使用伪类选择器:hover实现鼠标悬停时的按钮菜单效果。例如：

button:hover {
/* 鼠标悬停状态下的样式 */
background-color: #cccccc;
color: #ffffff;
border: 1px solid #cccccc;
}

以上样式会应用于鼠标悬停在按钮上的状态，提供了更丰富的交互体验。

总的来说，CSS按钮菜单选中效果可通过为选中状态添加样式类或使用:hover伪类选择器来实现。这样的交互设计，可以为用户提供更加优秀的使用体验。