比更值得优先使用，因其语义正确、可嵌套内容、无障碍支持好；极简按钮需保留background-color、color、border: none、padding、border-radius五个css属性；移动端关闭按钮必须满足44×44px点击区域；弹窗关闭时须同步恢复body滚动。
为什么
因为语义正确、可嵌套内容、无障碍支持好，不是“看起来一样就行”。<input type="button">不能放图标、不支持::before/::after伪元素（IE9及旧版Safari直接失效），且键盘焦点行为不稳定。<button></button>天然支持disabled状态、type语义区分，还允许内嵌<svg></svg>或<span></span>。如果按钮要加图标、做加载态、或适配屏幕阅读器，<button></button>是唯一合理选择。
极简按钮真正需要的5个CSS属性
极简不是删到只剩display: inline-block，而是保留功能必需项。以下组合已覆盖绝大多数场景：
-
background-color：别用纯白#fff，至少带灰度（如#f8f9fa），否则在白底上无视觉锚点 -
color：确保与背景对比度≥4.5:1（可用axe DevTools验证） -
border: none：显式清除，避免Safari等保留默认细边框 -
padding：用相对单位（如0.5em 1em），比10px 20px更适应缩放和字体变化 -
border-radius：0.25em或4px足够柔化，直角易显生硬，过大则失去“极简感”
示例：
button { background-color: #f0f0f0; color: #333; border: none; padding: 0.5em 1em; border-radius: 0.25em; }
移动端关闭按钮必须满足44×44px点击区域
这不是“建议”，是iOS Safari和Android Chrome的触控识别下限。小于这个尺寸，用户会反复点、误滑、放弃操作。
- 用
width: 44px; height: 44px包裹图标，哪怕图标本身只有20px - 优先用
padding扩展热区，而不是单纯放大图标——后者易导致布局错位 - 定位用
position: absolute; top: 8px; right: 8px，留出安全边距，避免紧贴右上角触发iOS“滑动返回”手势 - 千万别用
window.close()：浏览器会静默拦截，控制台报Scripts may close only the windows that were opened by them
隐藏弹窗后忘记恢复body滚动是高频隐形Bug
很多弹窗通过document.body.style.overflow = 'hidden'禁用背景滚动，但关闭时没重置，结果页面“卡死”——用户能点按钮、能看内容，就是不能滚。
- 绑定关闭事件时，必须同步执行
document.body.style.overflow = '' - 如果用了CSS动画（如
opacity+transform），要在transitionend回调里清理overflow，否则动画未结束就恢复滚动，页面会抖一下 - 不要依赖
setTimeout延时清理——动画时长可能被用户系统设置影响，不可靠
极简按钮最难的部分，从来不是写几行CSS，而是把body滚动状态、触控热区、伪元素兼容性这些副作用全兜住。漏掉一个，用户就觉得“这按钮不顺手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
