Как применить к QPushButton стиль CSS

Question

Подскажите как вот этот стиль css можно установить для моей кнопки

HTML:

<a href="" class="gradient-button">Button</a>

CSS:

body {
  background: #d6eaf8;
}
.gradient-button {
  text-decoration: none;
  display: inline-block;
  color: white;
  padding: 20px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
  background-size: 200% auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  transition: .5s;
}
.gradient-button:hover {
  background-position: right center;
}

Мой код:

import sys
from PyQt5.QtWidgets import QWidget, QApplication, QPushButton, QHBoxLayout

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()

        self.setupUI()
        self.setForm()

    def setupUI(self):
        self.resize(300, 300)
        self.setWindowTitle('Выбор цвета')
        self.btn = QPushButton('Кнопка')
        self.btn.setFixedSize(150, 30)

    def setForm(self):
        hbox = QHBoxLayout()
        hbox.addWidget(self.btn)
        self.setLayout(hbox)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    sys.exit(app.exec_())

Answer 1

если коротко, то с помощью CSS никак. В Qt поддерживается далеко не все что есть в CSS

Тем не менее вы можете реализовать вашу трансформацию программно. см. https://stackoverflow.com/questions/53084981/how-to-add-a-hover-transition-to-qpushbutton/53089207

Answer 2

Я попробовал реализовать вашу задумку (как я это понял), попробуйте:

 from PyQt5 import QtCore, QtGui, QtWidgets


class Button(QtWidgets.QPushButton):
    def __init__(self, parent=None):
        super().__init__(parent)
        
        self.fl = True

        self.setMinimumSize(150, 60)
        self.setMaximumSize(150, 60)

        self.color1 = QtGui.QColor(240, 53, 218)
        self.color2 = QtGui.QColor(61, 217, 245)

        self._animation = QtCore.QVariantAnimation(
            self,
            valueChanged=self._animate,
            startValue=0.00001,
            endValue=0.9999,
            duration=250
        )

    def _animate(self, value):
        self.qss = """
            font: 75 10pt "Microsoft YaHei UI";
            font-weight: bold;
            color: rgb(255, 255, 255);
            border-style: solid;
            border-radius: 20px;
            margin: 10px;
        """
        grad = "background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 {color1}, stop:{value} {color2}, stop: 1.0 {color1});".format(
            color1=self.color1.name(), color2=self.color2.name(), value=value
        )
        self.qss += grad
        self.setStyleSheet(self.qss)

    def _margin(self):
        if self.fl:
            mg = 'margin: 10px;'
        else:
            mg = 'margin: 8px 10px 12px;'
        self.qss += mg    
        self.setStyleSheet(self.qss) 

    def enterEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Forward)
        self._animation.start()
        self.fl = False
        QtCore.QTimer.singleShot(300, self._margin)
        super().enterEvent(event)

    def leaveEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Backward)
        self._animation.start()
        self.fl = True
        QtCore.QTimer.singleShot(300, self._margin)
        super().enterEvent(event)
        
        
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        
        self.button = Button('Кнопка')
        
        layout = QtWidgets.QHBoxLayout(self)
        layout.addWidget(self.button)
        

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.resize(300, 300)
    w.show()
    sys.exit(app.exec_())

БЛОГ НА HUSL

Как применить к QPushButton стиль CSS

Ответы (2 шт):