CSS 片段 · CSS

基础按钮样式

251代码小抄 · 可复制代码片段

说明

统一按钮与焦点态。

复制后按项目类名、路径与域名微调即可。

代码

css
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
  background: #0e7490; color: #fff; cursor: pointer;
}
.btn:hover { background: #0891b2; }
.btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

注意点

  • 保持对比度

常见问题

这段代码可以直接用于生产吗?

可作为起点,请按项目规范、安全与兼容性评审后再上线。

和在线工具如何配合?

生成类需求可用 tool.251w.com;需要整站定制可联系 web.251w.com。

相关工具与服务

需要在线生成?tool.251w.com

需要定制开发:web.251w.com