必须显式设置 type="button" 并重置默认样式，否则在表单中会触发提交；语义上跳转用 ，交互用 ；极简 css 应复用 currentcolor、font: inherit 和 em 单位，并兼顾 aria-label 与 disabled 无障碍。
直接用 <button></button> 标签 + 一行 CSS 就能实现，不需要框架、不依赖 JS，但必须手动重置默认样式和明确 type 属性，否则在表单里点一下就刷新页面。
为什么不能只写 <button>点我</button>
浏览器会给 <button></button> 加默认边框、背景色、内边距，不同浏览器渲染不一致；更关键的是，type 默认是 submit —— 只要按钮在 <form></form> 里（比如你博客的搜索框、评论区），点它就会触发提交，页面跳转或清空表单。
- 必须显式写
type="button"，哪怕它只是个纯展示或 JS 触发器 - 至少加
border: none; background: transparent;重置，否则和你博客正文的字体/行高对不齐 - 别信“默认样式也挺好看”，它在深色模式、高对比度模式下大概率失效
<button></button> 和 <a></a> 哪个更适合博客场景
取决于行为本质：如果点击后跳转到另一个页面（如「阅读更多」「归档页」），用 <a href="/archive"></a> 更语义正确、支持右键新标签、SEO 友好；如果触发 JS 动作（如「展开摘要」「复制代码块」），才用 <button type="button"></button>。
-
<a></a>按钮需用 CSS 强制表现得像按钮（display: inline-block、padding、text-decoration: none） -
<button></button>无法直接跳转，硬加onclick="location.href='...'"会破坏可访问性（屏幕阅读器读不出链接目标） - 博客侧边栏「订阅」按钮若指向 Mailchimp 表单，仍建议用
<a></a>+ 新窗口打开，而不是<button></button>模拟
极简风格的 CSS 关键参数
所谓“极简”，不是删光所有样式，而是用最少声明控制最核心视觉变量：颜色、尺寸、交互反馈。下面这段可以直接复制进博客 CSS 文件（假设你用的是类名 btn）：
button.btn {
border: 1px solid currentColor;
background: transparent;
color: inherit;
padding: 0.25em 0.75em;
font: inherit;
line-height: 1.5;
cursor: pointer;
}
button.btn:hover {
background: currentColor;
color: white;
}
说明：
-
currentColor复用父容器文字色，避免单独设color和border-color不同步 -
font: inherit确保按钮内文字大小/字重和周围正文一致，不用额外写font-size - 不要用
rem或固定像素设padding，用em随上下文缩放更安全 - hover 状态只改背景+反色，不加阴影、不缩放，这才是真极简
容易被忽略的无障碍细节
极简 ≠ 忽略可访问性。两个最低成本但常被跳过的点：
- 给
<button></button>加aria-label（比如图标按钮没文字时：<button type="button" aria-label="复制代码"><svg>...</svg></button>） - 禁用状态必须同时设
disabled属性和opacity: 0.5; pointer-events: none;，仅靠 CSS 变灰无法阻止键盘Enter触发
博客里「加载中…」这类临时按钮，disabled 是唯一可靠方式，CSS 类切换做不到真正禁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
