Qt element主题按钮qss样式-CSDN博客

本文链接：https://blog.csdn.net/h1530687053/article/details/114979805

本文介绍了一套基于Qt的按钮QSS样式美化方案，包括默认状态、悬停、按下及禁用等不同状态下的样式定义，适用于多种应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录[隐藏]

前言
按钮 qss 代码
效果展示

前言

前段时间想美化一套QSS, 搜了以下觉得 element ui 还不错，于是没话了几个按钮的 qss，个人感觉还不错。

按钮 qss 代码

.QPushButton,
.QToolButton {
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    padding: 5px;
    min-height: 15px;
    /*border-radius: 5px;*/
}

.QPushButton:hover,
.QToolButton:hover {
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.QPushButton:pressed,
.QToolButton:pressed {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: 0;
}

.QToolButton::menu-indicator {
    image: None;
}

/* btnPrimary */
QToolButton#btnPrimary,
QPushButton#btnPrimary {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
}
QToolButton#btnPrimary:focus,
QPushButton#btnPrimary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
}
QToolButton#btnPrimary:pressed,
QPushButton#btnPrimary:pressed {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #FFF;
}

/* btnSuccess */
QToolButton#btnSuccess,
QPushButton#btnSuccess {
    color: #FFF;
    background-color: #67C23A;
    border-color: #67C23A;
}
QToolButton#btnSuccess:focus,
QPushButton#btnSuccess:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #FFF;
}
QToolButton#btnSuccess:pressed,
QPushButton#btnSuccess:pressed {
    background: #5daf34;
    border-color: #5daf34;
    color: #FFF
}

/* btnInfo */
QToolButton#btnInfo,
QPushButton#btnInfo {
    color: #FFF;
    background-color: #909399;
    border-color: #909399
}
QToolButton#btnInfo:focus,
QPushButton#btnInfo:hover {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #FFF
}
QToolButton#btnInfo:pressed,
QPushButton#btnInfo:pressed {
    background: #82848a;
    border-color: #82848a;
    color: #FFF
}


/* btnWarning */
QToolButton#btnWarning,
QPushButton#btnWarning {
    color: #FFF;
    background-color: #E6A23C;
    border-color: #E6A23C
}
QToolButton#btnWarning:focus,
QPushButton#btnWarning:hover {
    background: #ebb563;
    border-color: #ebb563;
    color: #FFF
}
QToolButton#btnWarning:pressed,
QPushButton#btnWarning:pressed {
    background: #cf9236;
    border-color: #cf9236;
    color: #FFF
}

/* btnDanger */
QToolButton#btnDanger,
QPushButton#btnDanger {
    color: #FFF;
    background-color: #F56C6C;
    border-color: #F56C6C
}
QToolButton#btnDanger:focus,
QPushButton#btnDanger:hover {
    background: #f78989;
    border-color: #f78989;
    color: #FFF
}
QToolButton#btnDanger:pressed,
QPushButton#btnDanger:pressed {
    background: #dd6161;
    border-color: #dd6161;
    color: #FFF
}


/* btnDisabled */
QToolButton#btnDisabled,
QPushButton#btnDisabled {
    color: #C0C4CC;
    cursor: not-allowed;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5
}
QToolButton#btnDisabled:focus,
QPushButton#btnDisabled:hover {
    color: #C0C4CC;
    cursor: not-allowed;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5
}
QToolButton#btnDisabled:pressed,
QPushButton#btnDisabled:pressed {
    color: #C0C4CC;
    background-image: none;
    background-color: #FFF;
    border-color: #EBEEF5
}


/* btnLGPrimary */
QToolButton#btnLGPrimary,
QPushButton#btnLGPrimary {
    color: #FFF;
    background: qlineargradient(spread: pad, x1:0, y1:0, x2:1, y2:0,stop:0 rgba(82,160,253, 255),stop:0.5 rgba(0,226,250, 255), stop:1 rgba(0,226,250, 255));
    border-color:rgba(0,226,250, 255)
}
QToolButton#btnLGPrimary:focus,
QPushButton#btnLGPrimary:hover {
    background: qlineargradient(spread: pad, x1:0, y1:0, x2:1, y2:0,stop:0 rgba(82,160,253, 255),stop:0.5 rgba(0,226,250, 255), stop:1 rgba(0,226,250, 255));
    border-color:rgba(0,226,250, 255);
    color: #FFF
}
QToolButton#btnLGPrimary:pressed,
QPushButton#btnLGPrimary:pressed {
    background: qlineargradient(spread: pad, x1:0, y1:0, x2:1, y2:0,stop:0 rgba(82,160,253, 255),stop:0.5 rgba(0,226,250, 255), stop:1 rgba(0,226,250, 255));
    border-color:rgba(0,226,250, 255);
    color: #FFF
}

效果展示