CSS实现按钮点击/轻触缩放效果问题求助

纯CSS优化方案 #

给按钮添加几个关键属性，让移动端浏览器能正确识别:active状态：

.clicky {
    cursor: pointer; /* 标记元素为可交互，部分移动端浏览器需要这个才会触发:active */
    -webkit-tap-highlight-color: transparent; /* 移除默认的点击高亮框，优化体验 */
    touch-action: manipulation; /* 禁用浏览器默认触摸行为（比如双击缩放），提升响应速度 */
}

.clicky:active { 
    transform: scale(0.95); 
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
}

有些移动端浏览器对:active的触发条件较严格，cursor: pointer能让浏览器明确这是可点击元素，从而正常触发:active样式。

更可靠的JavaScript方案（兼容性拉满） #

如果纯CSS方案在部分机型上仍不生效，用触摸事件手动控制样式是更稳妥的选择：

<!-- 示例按钮 -->
<button class="clicky">点击我</button>

<script>
const clickBtn = document.querySelector('.clicky');

// 触摸开始时应用缩小样式
clickBtn.addEventListener('touchstart', () => {
    clickBtn.classList.add('active');
});

// 触摸结束或意外中断时移除样式
clickBtn.addEventListener('touchend', () => {
    clickBtn.classList.remove('active');
});
clickBtn.addEventListener('touchcancel', () => {
    clickBtn.classList.remove('active');
});

// 同时兼容桌面端点击
clickBtn.addEventListener('mousedown', () => {
    clickBtn.classList.add('active');
});
clickBtn.addEventListener('mouseup', () => {
    clickBtn.classList.remove('active');
});
clickBtn.addEventListener('mouseleave', () => {
    clickBtn.classList.remove('active');
});
</script>

<style>
.clicky.active { 
    transform: scale(0.95); 
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
}
</style>

这种方式通过监听触摸和鼠标事件，手动添加/移除active类，能确保在所有设备上都触发缩小效果，同时覆盖了手指滑出按钮这类触摸中断场景，体验更完整。

内容的提问来源于stack exchange，提问作者Sam Green