我们在用Qt写网吧小工具的时候 都有一个共同的问题：

为什么我们写出来的软件，总有一种十年前 WinXP 的感觉？文章源自网吧系统维护-https://www.58pxe.com/12958.html

其实很多时候，不是 Qt 不够漂亮，而是 按钮没有设计。文章源自网吧系统维护-https://www.58pxe.com/12958.html

一个好的按钮，不仅仅是换一个颜色，它应该拥有：文章源自网吧系统维护-https://www.58pxe.com/12958.html

• Hover 悬停动画
• Pressed 点击反馈
• Disabled 禁用状态
• Checked 选中状态
• Icon 图标
• 圆角
• 阴影
• 渐变
• 企业级统一规范

今天我们就把 QPushButton 一次讲透，让你的 Qt 软件瞬间提升一个档次。文章源自网吧系统维护-https://www.58pxe.com/12958.html

一、QPushButton 最基础样式

Qt 默认按钮：文章源自网吧系统维护-https://www.58pxe.com/12958.html

文章源自网吧系统维护-https://www.58pxe.com/12958.html

没有任何现代 UI 感。第一步就是去掉默认风格。文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton
{
    background: #409EFF;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
}

效果：文章源自网吧系统维护-https://www.58pxe.com/12958.html

文章源自网吧系统维护-https://www.58pxe.com/12958.html

二、Hover（鼠标悬停效果）

现代软件都有 Hover。例如鼠标移过去，蓝色变深一点。文章源自网吧系统维护-https://www.58pxe.com/12958.html

QSS：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton:hover
{
    background: #66b1ff;
}

完整代码：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton
{
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 6px;
}

QPushButton:hover
{
    background: #66b1ff;
}

Hover 是最简单也是最重要的一种交互，用户可以知道当前鼠标指向哪里。文章源自网吧系统维护-https://www.58pxe.com/12958.html

三、Pressed（点击反馈）

按钮不能点下去一点变化都没有。文章源自网吧系统维护-https://www.58pxe.com/12958.html

Pressed：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton:pressed
{
    background: #337ecc;
}

再加一点 padding，模拟按下效果：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton:pressed
{
    background: #337ecc;
    padding-left: 2px;
    padding-top: 2px;
}

点击时按钮像按下去一样，体验提升非常明显。文章源自网吧系统维护-https://www.58pxe.com/12958.html

四、Checked（选中状态）

很多工具栏按钮都是可以保持选中的，例如加粗按钮：点击后保持选中状态。文章源自网吧系统维护-https://www.58pxe.com/12958.html

button->setCheckable(true);

QSS：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton:checked
{
    background: #67C23A;
}

如果需要 Hover：文章源自网吧系统维护-https://www.58pxe.com/12958.html

QPushButton:checked:hover
{
    background: #85ce61;
}

这样整个按钮就是一个 Toggle Button。

五、Disabled（禁用状态）

很多人忽略 Disabled，默认灰色看不清楚，建议自己定义。

QSS：

QPushButton:disabled
{
    background: #dcdfe6;
    color: #999999;
    border: none;
}

例如登录按钮，当用户名为空时不可点击，体验更专业。

btn->setEnabled(false);

六、带 Icon 的按钮

企业软件大量使用图标按钮，例如：📂 打开、💾 保存、🖨 打印。

Qt 代码：

btn->setIcon(QIcon(":/icon/save.svg"));
btn->setIconSize(QSize(18, 18));

QSS：

QPushButton
{
    text-align: left;
    padding-left: 12px;
}

七、圆角按钮

现在几乎所有软件都是圆角。例如：

• border-radius: 4px; — 微软 Fluent 风格
• 6~8px — Material 风格
• 8~12px — 苹果风格

QSS：

QPushButton
{
    border-radius: 8px;
}

如果高度为 40px，那么 radius=20 得到胶囊按钮：

height: 40px;
border-radius: 20px;

八、渐变按钮

QSS 支持 LinearGradient。

QSS：

QPushButton
{
    color: white;
    border: none;
    border-radius: 8px;
    background: qlineargradient(
        x1: 0, y1: 0,
        x2: 1, y2: 0,
        stop: 0 #409EFF,
        stop: 1 #66b1ff
    );
}

Hover 渐变：

QPushButton:hover
{
    background: qlineargradient(
        x1: 0, y1: 0,
        x2: 1, y2: 0,
        stop: 0 #66b1ff,
        stop: 1 #79bbff
    );
}

效果：深蓝 → 浅蓝，现代感立刻出来。

九、危险按钮（Danger）

删除按钮千万不要用蓝色。

QSS：

QPushButton#danger
{
    background: #F56C6C;
    color: white;
    border: none;
    border-radius: 6px;
}

QPushButton#danger:hover
{
    background: #f78989;
}

效果：

这样用户一眼就知道这是危险操作。

十、成功按钮（Success）

例如确认、完成、开始、连接等操作。

QSS：

QPushButton#success
{
    background: #67C23A;
    color: white;
    border: none;
    border-radius: 6px;
}

十一、边框按钮（Outline）

很多工具栏喜欢白底蓝边，Hover 时反色。

QSS：

QPushButton
{
    background: white;
    color: #409EFF;
    border: 1px solid #409EFF;
    border-radius: 6px;
}

QPushButton:hover
{
    background: #409EFF;
    color: white;
}

这种按钮十分耐看。

十二、现代登录按钮（完整案例）

QPushButton
{
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
}

QPushButton:hover
{
    background: #66b1ff;
}

QPushButton:pressed
{
    background: #337ecc;
}

QPushButton:disabled
{
    background: #dcdfe6;
    color: #999;
}

非常接近企业后台管理系统。

十三、项目按钮设计规范

在大型 Qt 项目中，建议统一按钮设计规范，而不是每个页面随意编写样式。可以按照功能定义按钮类型：

统一规范的优势：

• 保持整个软件视觉一致性
• 降低维护成本，只需修改一份 QSS 即可全局生效
• 新成员开发时无需重复设计按钮样式
• 与设计师规范保持一致，减少沟通成本

实现方式：

建议将按钮样式封装到 button.qss 中，通过 QFile 加载，并配合 动态属性（Dynamic Property） 区分不同按钮类型。

ui->btnSave->setProperty("type", "primary");
ui->btnDelete->setProperty("type", "danger");
ui->btnCancel->setProperty("type", "outline");

style()->unpolish(ui->btnSave);
style()->polish(ui->btnSave);

对应 QSS：

QPushButton[type="primary"] {
    background: #409EFF;
    color: white;
}

QPushButton[type="danger"] {
    background: #F56C6C;
    color: white;
}

QPushButton[type="outline"] {
    background: white;
    color: #409EFF;
    border: 1px solid #409EFF;
}

这种做法比依赖 ObjectName 更灵活，也更适合组件化开发。

总结

一个优秀的 QPushButton 不只是一个可点击控件，而是承载交互反馈和品牌视觉的重要组件。通过合理设计 基础样式、Hover、Pressed、Checked、Disabled、图标、圆角、渐变 等状态，再配合统一的企业级按钮规范，你完全可以打造出媲美现代桌面软件（如 Visual Studio、Qt Creator、WPS、企业 MES 系统）的界面体验。