css点击滑动按钮特效可以为网页增添动态效果，让用户享受更好的视觉体验。下面是一个实现按钮点击滑动的css代码示例：
.slide-btn {
position: relative;
/* 设置按钮的相对定位 */
display: inline-block;
/* 设置元素为行内块元素 */
width: 100px;
/* 设置按钮宽度 */
height: 50px;
/* 设置按钮高度 */
background-color: #f00;
/* 设置按钮背景颜色 */
text-align: center;
/* 设置文本居中 */
line-height: 50px;
/* 设置文本垂直居中 */
color: #fff;
/* 设置文本颜色 */
cursor: pointer;
/* 设置鼠标悬浮状态 */
}
/* 设置按钮的悬浮状态 */
.slide-btn:hover:before {
transform: scaleX(1);
/* 设置悬浮状态下线的展开比例为1 */
opacity: 1;
/* 设置悬浮状态下线的透明度为1(不透明) */
}
/* 设置按钮的伸缩状态 */
.slide-btn:before {
content: "";
position: absolute;
/* 设置线的绝对定位 */
left: 0;
/* 设置线距左端的距离为0 */
bottom: 0;
/* 设置线距下端的距离为0 */
width: 100%;
/* 设置线宽为按钮宽度 */
height: 2px;
/* 设置线的高度 */
background-color: #fff;
/* 设置线的颜色 */
transform-origin: left center;
/* 设置线伸缩方向 */
transform: scaleX(0);
/* 设置线隐藏 */
transition: transform 0.3s ease, opacity 0.3s ease;
/* 设置伸缩动画效果 */
opacity: 0;
/* 设置线的透明度为0(透明) */
}
/* 设置按钮的点击状态 */
.slide-btn:active:hover:before {
transform: scaleX(1);
/* 设置点击状态下线的展开比例为1 */
opacity: 1;
/* 设置点击状态下线的透明度为1(不透明) */
}
以上是一个简单的css点击滑动按钮特效代码示例，您可以通过修改样式，实现更丰富的动态效果。
