LocalTools离线浏览器工具合集

分类: 开发工具

CSS 按钮生成器

站方自主规划没找到想要的工具？

用实时预览和可复制的代码打造可定制的 CSS 按钮

可视化地设计按钮，并复制干净的 HTML 和 CSS。在浏览器里调整颜色、边框、圆角、间距、阴影以及悬停和聚焦样式。

悬停与聚焦

预览

把鼠标移到预览上，或按 Tab 键移动到它，就能看到悬停与聚焦样式。

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

代码使用真正的 <button>，并保留可见的 :focus-visible 轮廓。去掉这个轮廓，用键盘操作的人就无从知道自己在哪里。

预览和生成的代码都在你的浏览器里构建。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

这是一个针对单个按钮的可视化编辑器：颜色、边框、圆角、内边距、字号与字重、阴影，以及悬停时会发生什么变化。预览所用的样式就是你复制的那段 CSS，所以把鼠标移上去或者用 Tab 键跳过去，看到的是真实状态而非近似效果。有两件事没有听天由命。标记是真正的 `<button type="button">`，不是加了样式的 div，因此天然可聚焦、可用键盘操作。而且输出始终保留可见的 `:focus-visible` 轮廓——生成式按钮 CSS 里最常见的无障碍缺陷，就是那句让键盘用户完全不知道自己身在页面何处的 `outline: none`。

使用方法

  1. 设置按钮文字和类名，然后选好背景、文字和边框的颜色。
  2. 调整圆角、边框宽度、内边距以及字号和字重，直到预览满意为止。
  3. 设置悬停背景和聚焦轮廓色，然后复制 HTML 和 CSS。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

可以做悬停样式吗？
可以。悬停背景、可选的上浮效果和阴影变化都在生成的 CSS 里，作为一条单独的 :hover 规则，你之后还能继续修改。
这个按钮需要 JavaScript 吗？
不需要。输出就是普通的 HTML 和 CSS。只有当你要决定按下之后做什么时，才需要脚本。
HTML 和 CSS 能分开复制吗？
能——两者各有自己的复制按钮，你可以把 CSS 放进样式表，把标记放到该放的位置。
为什么 CSS 里带有聚焦轮廓？
因为没有它，用键盘浏览的人就看不出自己正停在哪个控件上。生成的规则使用 :focus-visible，因此轮廓只在键盘聚焦时出现，不会每次点击鼠标都冒出来。
生成的代码是本地的吗？
是的。所有设置、预览和生成的代码片段都留在你的浏览器里。

返回全部工具