HTML按钮无独立样式设置方法，所有视觉效果均由CSS控制；其默认样式源于浏览器UA样式，不同浏览器差异明显，且<button>与<input type="button">表现不完全一致。
HTML 按钮本身没有“样式设置方法”这个独立概念——它只是 <button> 元素，所有视觉效果都靠 CSS 控制，且必须用 CSS。
按钮默认样式为什么看起来不一样？
浏览器对 <button> 有内置 UA 样式（比如 Chrome 加圆角、阴影、背景色），不同浏览器渲染差异明显。你看到的“默认按钮”，其实是 CSS 渲染结果，不是 HTML 能控制的。
- 不写任何 CSS 时，
<button>和<input type="button">表现不完全一致（前者更易定制，后者在旧 IE 中兼容性略好） -
<button>默认display: inline-block，但会自带vertical-align: middle和内边距，容易和文字对不齐 - 部分移动端 Safari 对
border-radius处理较激进，可能意外裁掉图标或文字
怎么用 CSS 改变按钮外观？关键属性就这几个
别堆 class 或依赖 UI 库起步——先掌握最常改的 5 个 CSS 属性，覆盖 90% 场景：
-
background-color：设背景色，记得同时设color控制文字色 -
border：清掉默认边框用border: none；加自定义边框注意box-sizing: border-box影响宽高计算 -
padding：比height/width更可靠地控制按钮大小，避免文字被截 -
border-radius：设圆角，但 iOS Safari 下若值过大（如999px）可能失效，建议用12px或0.5rem -
cursor: pointer：必须加，否则 hover 时鼠标不提示可点击（尤其在<div>模拟按钮时容易漏）
示例（极简但可用）：
<button class="btn">提交</button>
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
为什么加了 hover 样式却没反应？
常见原因不是 CSS 写错，而是触发条件被拦住了：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
pointer-events: none（比如模态框遮罩层未关闭时） - 按钮被其他元素盖住（z-index 不够，或定位后脱离文档流导致点击区域偏移）
- 用了
opacity: 0或visibility: hidden隐藏按钮，但没删 DOM —— 它仍占位且可交互 - 在触摸设备上，
:hover可能只在第一次点击后才触发（iOS Safari 的怪癖），稳妥做法是加:active并配合touch-action: manipulation
要不要用 <input type="button"> 替代 <button>？
除非维护老项目（IE8 及以下），否则不用。区别很实际：
-
<button>支持嵌套任意 HTML（比如<svg>图标 + 文字），<input>只能设value纯文本 -
<button>在表单中默认type="submit"，容易误触提交；务必显式写type="button"防止刷新页面 -
<input>的disabled状态下，CSS 的:disabled伪类支持更稳；而<button disabled>在某些 Android WebView 中可能样式不生效
所以日常开发优先用 <button type="button">，只在明确需要规避某次 CSS 渲染 bug 时临时切 <input>。
真正卡住人的从来不是“怎么加圆角”，而是
