CSS 按钮生成器

可视化调整按钮的内边距、背景色、文字色、圆角、字号、阴影与悬停态,实时预览按钮外观,一键生成完整可用的按钮 CSS 代码,全部在浏览器本地完成。

按钮参数 已就绪
水平内边距
垂直内边距
背景颜色
#3366ff
文字颜色
#ffffff
圆角半径
字号
悬停背景色
#2050cc
阴影模糊
 

拖动滑块即可实时预览;悬停背景色在鼠标移入时生效。

实时预览与代码

          

生成的 CSS 将显示在这里。

使用规则
  • 本工具生成的 CSS 包含基础态与 :hover 悬停态两条规则。
  • 按钮内边距使用 padding 简写,字号影响按钮的可读性。
  • 背景与文字颜色建议保证对比度,避免可读性不足。
  • 生成的 .btn 类可直接用于按钮或链接元素。
  • 本工具完全在浏览器本地运行,输入数据不会上传到任何服务器。