功能介绍
CSS按钮生成器可以帮你快速自定义生成符合需求的CSS按钮，支持调整颜色、尺寸、边框、阴影和hover交互动画，实时预览效果，最终输出可直接使用的HTML和CSS代码。
使用方法
在上方调整各项参数即可实时看到按钮预览效果：
- 选择按钮的背景色和文字颜色
- 调整圆角大小、边框宽度和颜色
- 设置按钮的内边距和文字大小
- 开启/关闭hover效果：背景变深、向上位移
调整完成后可以点击「复制代码」按钮复制完整的HTML和CSS代码，直接粘贴到你的项目中使用。
参数说明
| 参数 | 说明 |
|---|---|
| 背景色/文字色 | 按钮的背景和文字颜色，通过取色器直接选择 |
| 圆角 | 按钮四个角的圆角大小，单位为像素，0即为直角 |
| 边框宽度/颜色 | 按钮边框的宽度和颜色，宽度为0则无边框 |
| 水平/垂直内边距 | 按钮文字与按钮边框之间的间距，分别控制水平和垂直方向 |
| 字号 | 按钮内文字的大小，单位为像素 |
| 阴影大小 | 按钮阴影的模糊范围，0则无阴影 |
| 背景色hover自动变深 | 鼠标悬浮时背景自动加深15% |
| hover向上位移 | 鼠标悬浮时按钮向上移动，营造悬浮抬起效果（需要开启阴影才有明显效果） |
注意事项
- 生成的CSS使用了transition过渡动画，所有现代浏览器都支持，不影响页面性能
- 如果你不需要hover效果，取消勾选对应选项即可，生成的代码也不会包含相关效果
- 按钮使用inline-block布局，可以直接放到页面任何位置使用