CSS按钮切换滑动样式对于网站的交互体验和视觉效果有很大的提升。下面我们将介绍如何实现这一效果。

/*CSS代码*/.btn-group {display: flex;margin: 20px;}.btn {width: 100px;height: 40px;background-color: #ccc;color: #fff;font-size: 16px;font-weight: bold;text-align: center;line-height: 40px;cursor: pointer;transition: all 0.3s ease-in-out;}.btn.active {background-color: #f00;}.slide {position: relative;height: 3px;background-color: #000;transition: all 0.3s ease-in-out;}.slider {position: absolute;top: -5px;left: 0;width: 100px;height: 10px;background-color: #f00;border-radius: 5px;transform: translateX(0);transition: all 0.3s ease-in-out;}

首先我们创建一个由按钮组成的按钮组。

<div ><div >按钮1</div><div >按钮2</div><div >按钮3</div></div>

接下来，我们需要添加一个滑块作为按钮的指示器。我们给滑块所在的容器设置一个相对定位，高度为3px，背景颜色为黑色。滑块绝对定位，初始位置为0，宽度为按钮的宽度，并且设置了过渡效果。

<div ><div ></div></div>

接下来，我们需要在JavaScript中为按钮添加事件监听。点击按钮时，我们将当前的按钮设为active状态，并将滑块移动到当前按钮的位置。我们使用CSS中的transform属性来控制滑块的位置。

//JS代码let btns = document.querySelectorAll('.btn');let slider = document.querySelector('.slider');btns.forEach((btn) => {btn.addEventListener('click', function() {//移动滑块slider.style.transform = 'translateX(' + this.offsetLeft + 'px)';//修改按钮状态btns.forEach((btn) => {btn.classList.remove('active');})this.classList.add('active');})})

通过以上的代码，我们就可以实现一个简单的CSS按钮切换滑动样式。效果如下：