html + css 实现一排按钮,点击切换按钮样式
时间: 2023-08-30 16:06:18 浏览: 106
好的,可以使用以下的 HTML 和 CSS 代码来实现一排按钮,并且点击按钮可以切换按钮的样式:
HTML代码:
```html
<div class="buttons">
<button class="active">Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
```
CSS代码:
```css
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 0 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: #ccc;
color: #fff;
cursor: pointer;
}
button.active {
background-color: #f00;
}
```
在这段代码中,我们使用了 flexbox 布局来使这些按钮水平居中,同时使用了 margin 和 padding 来设置按钮的间距和内边距,使用了 border-radius 来设置按钮的圆角,使用了 background-color 和 color 来设置按钮的背景色和字体颜色,使用了 cursor: pointer 来设置鼠标悬停时的鼠标样式。
同时,我们使用了一个 active 的类来设置当前选中的按钮的样式,当这个类被添加到某个按钮上时,这个按钮的背景色会变成红色。我们可以使用 JavaScript 来实现点击按钮后添加或移除这个类。