CSS 按钮生成器
设计按钮并复制干净的 CSS。
设置按钮文字、颜色、圆角、内边距和字号，实时预览，并复制包含悬停状态的即用 CSS。
背景
文字颜色
悬停颜色
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}如何生成按钮 CSS
- 输入你想要的按钮文字。
- 选择背景、文字和悬停颜色。
- 用滑块调整圆角、内边距和字号。
- 复制 CSS，并把悬停规则加入样式表。
常见问题
生成的 CSS 包含悬停效果吗？
包含。会同时生成基础样式和使用你所选悬停颜色的 :hover 规则。
可以修改字体或字重吗？
输出设置字重为 700。粘贴后可自由调整 font-family 及其他属性。
会有数据被上传吗？
不会。生成器完全在客户端运行，不存储任何内容。