Button hover transition duration

Question

I’ve been working on a small project in PyQt5 for a little while and I wanted to try and make it look a little better using the style sheet. For testing I copied an example from W3Schools into a new project just to see if it would work. The example is a button where the background fades from white to green. Everything works except instead of fading, the transition happens instantly. My questions is how can I get that fade effect? I’m also curious how I can get that same sort of transition effect but with other aspects of the button such as size or shape.

I’ve done a lot of searching but everything relevant that I’ve found is a little out of my scope of knowledge. What I do know is that I will probably have to code it in instead of using the style sheet, but I’m not exactly sure how to do that. I was thinking I could make a function to constantly change the color but I also think that there’s probably a better way to do this.

This is the code that is generated when I convert the .ui file.

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(400, 300)
        self.pushButton = QtWidgets.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(10, 10, 381, 281))
        self.pushButton.setMouseTracking(False)
        self.pushButton.setAutoFillBackground(False)
        self.pushButton.setStyleSheet(".QPushButton{n"
"background-color: #4CAF50;n"
"border: none;n"
"color: white;n"
"padding: 16px 32px;n"
"text-align: center;n"
"text-decoration: none;n"
"display: inline-block;n"
"font-size: 16px;n"
"margin: 4px 2px;n"
"transition-duration: 0.4s;n"
"cursor: pointer;n"
"}n"
"n"
"#pushButton{n"
"background-color: white;n"
"color: black;n"
"border: 2px solid #4CAF50;n"
"}n"
"n"
"#pushButton:hover{n"
"background-color: #4CAF50;n"
"color: white;n"
"}")
        self.pushButton.setObjectName("pushButton")

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.pushButton.setText(_translate("Dialog", "Click Here"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

This is what is in the style sheet but more readable.

.QPushButton{
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}

#pushButton{
background-color: white;
color: black;
border: 2px solid #4CAF50;
}

#pushButton:hover{
background-color: #4CAF50;
color: white;
}

Here is a picture of the button.

Before hovering

and after

Asked By: Kieran Desmarais

||

Source

Answer 1

If the OP code is executed from the terminal/CMD, the following warning is obtained:

Unknown property display
Unknown property transition-duration
Unknown property cursor
...

And why do you point out that these properties are unknown? As Qt Style Sheet is not CSS, QSS is based on CSS2.1 and has a limited code of properties(see here for more information) so that properties such as display, transition-duration and cursor are not defined in that standard, so it does not work.

If you want to make an animation you should use some QXAnimation, in this case I will use QVariantAnimation that starts to run in the enterEvent() and leaveEvent() methods:

from PyQt5 import QtCore, QtGui, QtWidgets


class PushButton(QtWidgets.QPushButton):
    def __init__(self, parent=None):
        super().__init__(parent)
        self._animation = QtCore.QVariantAnimation(
            startValue=QtGui.QColor("#4CAF50"),
            endValue=QtGui.QColor("white"),
            valueChanged=self._on_value_changed,
            duration=400,
        )
        self._update_stylesheet(QtGui.QColor("white"), QtGui.QColor("black"))
        self.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))

    def _on_value_changed(self, color):
        foreground = (
            QtGui.QColor("black")
            if self._animation.direction() == QtCore.QAbstractAnimation.Forward
            else QtGui.QColor("white")
        )
        self._update_stylesheet(color, foreground)

    def _update_stylesheet(self, background, foreground):

        self.setStyleSheet(
            """
        QPushButton{
            background-color: %s;
            border: none;
            color: %s;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            font-size: 16px;
            margin: 4px 2px;
            border: 2px solid #4CAF50;
        }
        """
            % (background.name(), foreground.name())
        )

    def enterEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Backward)
        self._animation.start()
        super().enterEvent(event)

    def leaveEvent(self, event):
        self._animation.setDirection(QtCore.QAbstractAnimation.Forward)
        self._animation.start()
        super().leaveEvent(event)


class Dialog(QtWidgets.QDialog):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.setWindowTitle(self.tr("Dialog"))

        self.pushButton = PushButton()
        self.pushButton.setText(self.tr("Click Here"))
        self.pushButton.setSizePolicy(
            QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Minimum
        )

        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.pushButton)

        self.resize(400, 300)


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = Dialog()
    w.show()
    sys.exit(app.exec_())

Answered By: eyllanesc

Button hover transition duration

Question:

Answers: