css伸缩按钮特效 |html css验证码

.btn {
width: 100px;
height: 40px;
background-color: #333;
color: #fff;
border-radius: 5px;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: all .3s ease-in-out;
}
.btn:hover {
background-color: #666;
}
.btn.active {
width: 200px;
}

以上代码是CSS伸缩按钮特效的实现方式，大家可以看到，通过使用CSS过渡动画来实现伸缩效果。当用户点击按钮时，通过添加.active类，使按钮的宽度可以扩大到200px。

除了使用hover伪类和添加类名，大家还可以使用JavaScript来实现这种效果。例如：

const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
btn.classList.toggle('active');
});

当用户点击按钮时，通过classList.toggle()方法来添加或删除.active类，从而实现CSS伸缩按钮特效。