QPushButton 按钮 QSS 美化样式

.settings/org.eclipse.core.resources.prefs

@@ -33,6 +33,7 @@ encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/cr
 encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/information.py=utf-8
 encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/question.py=utf-8
 encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/warning.py=utf-8
+encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QPushButton\u6309\u94AE/ButtonHover.py=utf-8
 encoding//\u754C\u9762\u7F8E\u5316/QScrollBar\u6EDA\u52A8\u6761\u6837\u5F0F/ScrollBar.py=utf-8
 encoding//\u7A0B\u5E8F\u91CD\u542F/AutoRestart.py=utf-8
 encoding//\u7A97\u53E3\u91CD\u542F/RestartMainWindow.py=utf-8

界面美化/QSS美化例子/QPushButton按钮/ButtonHover.py

@@ -0,0 +1,113 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+'''
+Created on 2018年1月29日
+@author: Irony."[讽刺]
+@site: http://alyl.vip, http://orzorz.vip, https://coding.net/u/892768447, https://github.com/892768447
+@email: 892768447@qq.com
+@file: ButtonHover
+@description: 
+'''
+import sys
+from PyQt5.QtWidgets import QWidget, QHBoxLayout, QPushButton, QApplication
+
+
+__Author__ = "By: Irony.\"[讽刺]\nQQ: 892768447\nEmail: 892768447@qq.com"
+__Copyright__ = "Copyright (c) 2018 Irony.\"[讽刺]"
+__Version__ = "Version 1.0"
+
+StyleSheet = '''
+/*这里是通用设置，所有按钮都有效，不过后面的可以覆盖这个*/
+QPushButton {
+    border: none; /*去掉边框*/
+}
+
+/*
+QPushButton#xxx
+或者
+#xx
+都表示通过设置的objectName来指定
+*/
+QPushButton#RedButton {
+    background-color: #f44336; /*背景颜色*/
+}
+#RedButton:hover {
+    background-color: #e57373; /*鼠标悬停时背景颜色*/
+}
+/*注意pressed一定要放在hover的后面，否则没有效果*/
+#RedButton:pressed {
+    background-color: #ffcdd2; /*鼠标按下不放时背景颜色*/
+}
+
+#GreenButton {
+    background-color: #4caf50;
+    border-radius: 5px; /*圆角*/
+}
+#GreenButton:hover {
+    background-color: #81c784;
+}
+#GreenButton:pressed {
+    background-color: #c8e6c9;
+}
+
+#BlueButton {
+    background-color: #2196f3;
+    /*限制最小最大尺寸*/
+    min-width: 96px;
+    max-width: 96px;
+    min-height: 96px;
+    max-height: 96px;
+    border-radius: 48px; /*圆形*/
+}
+#BlueButton:hover {
+    background-color: #64b5f6;
+}
+#BlueButton:pressed {
+    background-color: #bbdefb;
+}
+
+#OrangeButton {
+    max-height: 48px;
+    border-top-right-radius: 20px; /*右上角圆角*/
+    border-bottom-left-radius: 20px; /*左下角圆角*/
+    background-color: #ff9800;
+}
+#OrangeButton:hover {
+    background-color: #ffb74d;
+}
+#OrangeButton:pressed {
+    background-color: #ffe0b2;
+}
+
+/*根据文字内容来区分按钮,同理还可以根据其它属性来区分*/
+QPushButton[text="purple button"] {
+    color: white; /*文字颜色*/
+    background-color: #9c27b0;
+}
+'''
+
+
+class Window(QWidget):
+
+    def __init__(self, *args, **kwargs):
+        super(Window, self).__init__(*args, **kwargs)
+        layout = QHBoxLayout(self)
+        layout.addWidget(QPushButton("red button", self,
+                                     objectName="RedButton", minimumHeight=48))
+        layout.addWidget(QPushButton("green button", self,
+                                     objectName="GreenButton", minimumHeight=48))
+        layout.addWidget(QPushButton("blue button", self,
+                                     objectName="BlueButton", minimumHeight=48))
+        layout.addWidget(QPushButton("orange button", self,
+                                     objectName="OrangeButton", minimumHeight=48))
+        layout.addWidget(QPushButton("purple button", self,
+                                     objectName="PurpleButton", minimumHeight=48))
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    app.setStyleSheet(StyleSheet)
+    w = Window()
+    w.show()
+    sys.exit(app.exec_())

界面美化/QSS美化例子/QPushButton按钮/README.md

@@ -0,0 +1,8 @@
+# QPushButton 按钮 QSS 美化样式
+
+主要改变背景颜色、鼠标按下颜色、鼠标悬停颜色、圆角、圆形、文字颜色
+
+效果图：
+
+### [ButtonHover.py](ButtonHover.py)
+![ButtonHover](ScreenShot/ButtonHover.gif)

界面美化/README.md

@@ -1,6 +1,7 @@
 # 通过QSS或者重绘对界面进行美化
 
 ### [1.QSS美化例子](QSS美化例子/)
+ - [1.1 QPushButton按钮](QPushButton按钮/)
 
 ### [2.QMessageBox样式](QMessageBox样式/)
  - [2.1 方案一](QMessageBox样式/方案一)