按钮样式控制
基本样式
颜色设置
高级设置
8px
5px
200ms
按钮预览
在各种状态下的按钮效果
点击按钮
默认状态
按钮
悬停状态
按钮
点击状态
按钮
响应式预览：
生成的CSS代码
/* CSS按钮生成器生成的代码 */
.my-button {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #165DFF;
color: #FFFFFF;
font-size: 1rem;
font-weight: 500;
text-align: center;
text-decoration: none;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.my-button:hover {
background-color: #0E42D2;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
.my-button:active {
background-color: #0E42D2;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
transform: translateY(0);
}
复制成功！
将此CSS代码复制到你的项目中使用
支持响应式设计和各种状态变化
用户评价
4.1
基于189次投票
5 星
45%
4 星
30%
3 星
15%
2 星
7%
1 星
3%
4.1
平均评分
张小明
2025年6月15日
这个工具真的很实用！我一直在寻找一个能够快速生成高质量CSS按钮的工具，终于找到了。界面简洁明了，操作简单，生成的代码也很干净，没有冗余。非常推荐给前端开发者！
李小华
2025年5月28日
功能很强大，界面也很美观。我特别喜欢它的实时预览功能，可以让我在调整参数的同时看到按钮的变化。唯一建议是可以增加更多的预设样式，这样可以更快速地获取想要的效果。
王大锤
2025年4月10日
作为一个初学者，这个工具帮了我大忙。以前写CSS按钮总是要花很多时间调整样式，现在只需要几分钟就能生成一个漂亮的按钮。唯一的小问题是在移动设备上预览时有些卡顿，希望未来能改进。