pyside，pyqt中QPushButton的qss美化

一、使用QT设计师先创建按钮

这里就不多说了，直接上效果

运行后的效果

二、QPushButton

按钮是任何图形用户界面中最常用的小部件。按下（或者单击）按钮以命令计算机执行某个操作或回答问题。典型的按钮是确定，应用，取消，关闭，是，否和帮助。

三、按钮的主要状态

• 普通状态
• hover：当鼠标移动到按钮上时触发。
• checked：鼠标松开时触发，如果鼠标拖拽到按钮区域之外释放则不会触发。
• pressed：鼠标按下时触发。

四、按钮样式

1.默认按钮

• 默认样式

QPushButton{color: #606266;background-color: #fff; border: 1px solid #dcdfe6;}
QPushButton:hover{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff}
QPushButton:checked{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}
QPushButton:pressed{color: #3a8ee6;border-color: #3a8ee6;background-color: #ecf5ff;}

• 圆角按钮

QPushButton{color: #606266;  background-color: #fff; border: 1px solid #dcdfe6; border-radius: 10px; }
QPushButton:hover{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff}
QPushButton:checked{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}
QPushButton:pressed{color: #3a8ee6;border-color: #3a8ee6;background-color: #ecf5ff;}

• 禁用按钮

QPushButton{color: #c0c4cc;background-color: #fff;border: 1px solid #ebeef5;border-radius: 10px;
}

2.主要按钮

• 默认样式

QPushButton{color:#fff;background-color:#409eff;border: 1px solid #409eff;
}QPushButton:hover{color:#fff;border-color:#66b1ff;background-color:#66b1ff;
}QPushButton:checked{color:#fff;border-color:#66b1ff;background-color: #66b1ff;
}QPushButton:pressed{color:#fff;border-color: #3a8ee6;background-color: #3a8ee6;
}

• 圆角按钮

QPushButton{color:#fff;background-color:#409eff;border: 1px solid #409eff;border-radius: 10px;
}QPushButton:hover{color:#fff;border-color:#66b1ff;background-color:#66b1ff;
}QPushButton:checked{color:#fff;border-color:#66b1ff;background-color: #66b1ff;
}QPushButton:pressed{color:#fff;border-color: #3a8ee6;background-color: #3a8ee6;
}

• 禁用按钮

QPushButton{color:#fff;background-color:#a0cfff;border: 1px solid#a0cfff;border-radius:10px;}

3.成功按钮

• 默认样式

QPushButton{color:#fff;background-color:#67c23a;border: 1px solid #67c23a;
}QPushButton:hover{color:#fff;border-color:#85ce61;background-color:#85ce61;
}QPushButton:checked{color:#fff;border-color:#85ce61;background-color: #85ce61;
}QPushButton:pressed{color:#fff;border-color: #5daf34;background-color: #5daf34;
}

• 圆角按钮

QPushButton{color:#fff;background-color:#67c23a;border: 1px solid #67c23a;border-radius: 10px;
}QPushButton:hover{color:#fff;border-color:#85ce61;background-color:#85ce61;
}QPushButton:checked{color:#fff;border-color:#85ce61;background-color: #85ce61;
}QPushButton:pressed{color:#fff;border-color: #5daf34;background-color: #5daf34;
}

• 禁用按钮

QPushButton{color:#fff;background-color:#b3e19d;border: 1px solid#b3e19d;border-radius:10px;}

4.信息按钮

• 默认样式

QPushButton{color:#fff;background-color:#909399;border: 1px solid #909399;
}QPushButton:hover{color:#fff;border-color:#a6a9ad;background-color:#a6a9ad;
}QPushButton:checked{color:#fff;border-color:#a6a9ad;background-color: #a6a9ad;
}QPushButton:pressed{color:#fff;border-color: #82848a;background-color: #82848a;
}

• 圆角按钮

QPushButton{color:#fff;background-color:#909399;border: 1px solid #909399;border-radius: 10px;
}QPushButton:hover{color:#fff;border-color:#a6a9ad;background-color:#a6a9ad;
}QPushButton:checked{color:#fff;border-color:#a6a9ad;background-color: #a6a9ad;
}QPushButton:pressed{color:#fff;border-color: #82848a;background-color: #82848a;
}

• 禁用按钮

QPushButton{color:#fff;background-color:#c8c9cc;border: 1px solid#c8c9cc;border-radius:10px;}

5.警告按钮

• 默认样式

QPushButton{color:#fff;background-color:#e6a23c;border: 1px solid #e6a23c;
}QPushButton:hover{color:#fff;border-color:#ebb563;background-color:#ebb563;
}QPushButton:checked{color:#fff;border-color:#ebb563;background-color: #ebb563;
}QPushButton:pressed{color:#fff;border-color: #cf9236;background-color: #cf9236;
}

• 圆角按钮

QPushButton{color:#fff;background-color:#e6a23c;border: 1px solid #e6a23c;border-radius: 10px;
}QPushButton:hover{color:#fff;border-color:#ebb563;background-color:#ebb563;
}QPushButton:checked{color:#fff;border-color:#ebb563;background-color: #ebb563;
}QPushButton:pressed{color:#fff;border-color: #cf9236;background-color: #cf9236;
}

• 禁用按钮

QPushButton{color:#fff;background-color:#f3d19e;border: 1px solid#f3d19e;border-radius:10px;}

6.危险按钮

• 默认样式

QPushButton{color:#fff;background-color:#f56c6c;border: 1px solid #f56c6c;
}QPushButton:hover{color:#fff;border-color:#f78989;background-color:#f78989;
}QPushButton:checked{color:#fff;border-color:#f78989;background-color: #f78989;
}QPushButton:pressed{color:#fff;border-color: #dd6161;background-color: #dd6161;
}

• 圆角按钮

QPushButton{color:#fff;background-color:#f56c6c;border: 1px solid #f56c6c;border-radius: 10px;
}QPushButton:hover{color:#fff;border-color:#f78989;background-color:#f78989;
}QPushButton:checked{color:#fff;border-color:#f78989;background-color: #f78989;
}QPushButton:pressed{color:#fff;border-color: #dd6161;background-color: #dd6161;
}

• 禁用按钮

QPushButton{color:#fff;background-color:#fab6b6;border: 1px solid#fab6b6;border-radius:10px;}

五、使用python代码生成

def createButtonStyle(def_bg_color="#409eff", h_bg_color="#66b1ff",
                      c_bg_color="#66b1ff", p_bg_color="#3a8ee6",
                      radius='10px', font_color="#fff"):
    QB = "QPushButton{"
    QBH = "}QPushButton:hover{"
    QBC = "}QPushButton:checked{"
    QBP = "}QPushButton:pressed{"
    END = "}"
    style = f"""{QB}color:{font_color};background-color:{def_bg_color};border: 1px solid {def_bg_color};border-radius: {radius};
{QBH}color:{font_color};border-color:{h_bg_color};background-color:{h_bg_color};
{QBC}color:{font_color};border-color:{c_bg_color};background-color: {c_bg_color};
{QBP}color:{font_color};border-color: {p_bg_color};background-color: {p_bg_color};
{END}"""
    return style


DefaultButtonStyle = """
QPushButton{
    color: #606266; 
    background-color: #fff; 
    border: 1px solid #dcdfe6;
    border-radius: 10px;
}
QPushButton:hover{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff
}
QPushButton:checked{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
QPushButton:pressed{
    color: #3a8ee6;
    border-color: #3a8ee6;
    background-color: #ecf5ff;}
"""
PrimaryButtonStyle = createButtonStyle()
SuccessButtonStyle = createButtonStyle(def_bg_color="#67c23a", h_bg_color="#85ce61",
                                       c_bg_color="#85ce61", p_bg_color="#5daf34")
InfoButtonStyle = createButtonStyle(def_bg_color="#909399", h_bg_color="#a6a9ad",
                                    c_bg_color="#a6a9ad", p_bg_color="#82848a")
WarningButtonStyle = createButtonStyle(def_bg_color="#e6a23c", h_bg_color="#ebb563",
                                       c_bg_color="#ebb563", p_bg_color="#cf9236")
DangerButtonStyle = createButtonStyle(def_bg_color="#f56c6c", h_bg_color="#f78989",
                                      c_bg_color="#f78989", p_bg_color="#dd6161")


def createDisabledButtonStyle(style_color='#a0cfff', color='#fff', radius='10px'):
    QP = 'QPushButton{'
    END = '}'
    style = f"""{QP}color:{color};background-color:{style_color};border: 1px solid{style_color};border-radius:{radius};{END}"""
    return style


DisabledDefaultButtonStyle = """
QPushButton{color: #c0c4cc;background-color: #fff;border: 1px solid #ebeef5;border-radius: 10px;
}
"""
DisabledPrimaryButtonStyle = createDisabledButtonStyle()
DisabledSuccessButtonStyle = createDisabledButtonStyle(style_color='#b3e19d')
DisabledInfoButtonStyle = createDisabledButtonStyle(style_color='#c8c9cc')
DisabledWarningButtonStyle = createDisabledButtonStyle(style_color='#f3d19e')
DisabledDangerButtonStyle = createDisabledButtonStyle(style_color='#fab6b6')