css如何实现两个按钮的切换

CSS是基础前端开发中不可或缺的一部分，它可以实现许多炫酷的效果，其中包括两个按钮的切换。接下来，我们将介绍如何使用CSS实现这个效果。

HTML代码如下：div class="container">
      button class="active-btn">
    按钮1/button>
      button class="inactive-btn">
    按钮2/button>
    /div>
CSS代码如下：.container {
      display: flex;
      justify-content: center;
      align-items: center;
}
.active-btn {
      background-color: red;
      color: white;
}
.inactive-btn {
      background-color: white;
      color: black;
}
.active-btn:focus,.inactive-btn:focus {
      outline: none;
}
.active-btn:focus {
      background-color: red;
      color: white;
}
.inactive-btn:focus {
      background-color: black;
      color: white;
}
    

以上代码中，“container”类实现了按钮组件的居中布局，而“active-btn”和“inactive-btn”类分别代表两个按钮，它们分别具有不同的背景颜色和文本颜色。此外，我们还为按钮添加了:focus伪类，以实现在用户点击按钮时的样式变化。

在实际应用中，我们可以通过JavaScript代码来监听按钮点击事件，实现按钮的切换效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！