Saemol Tools
免费工具
简体中文
设计与配色

生成CSS按钮

生成CSS按钮 — 指定尺寸或颜色，查看代码或结果. 输入指南: 背景颜色, 颜色, 按钮内边距 (px), 圆角半径 (px). 无需账号.

无需账号

正在加载工具…

使用方法

  1. 1输入指南: 背景颜色, 颜色, 按钮内边距 (px), 圆角半径 (px).
  2. 2运行工具并查看结果。
  3. 3复制结果 / 保存结果文件.

使用提示

请检查输入范围和单位。结果取决于您的输入和浏览器。

广告可能处理连接数据，个性化遵循您的隐私选择。 隐私说明（英语）

实际输入与输出示例

以下结果由此工具的实际引擎使用示例值计算，不使用个人输入或已保存工作。可在工具中载入示例查看相同输入。

示例输入

字段值
背景颜色
#0F766E
颜色
#FFFFFF
按钮内边距 (px)
12
圆角半径 (px)
12

示例结果

.button {
  background: #0F766E;
  color: #FFFFFF;
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  cursor: pointer;
}
.button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
输入条件

以下为实际输入验证范围，并不保证所有允许值都符合现实或适用于您的情况。

  • 按钮内边距 (px): 允许范围: 4 ≤ x ≤ 40
  • 圆角半径 (px): 允许范围: 0 ≤ x ≤ 100

相关工具

全部工具