How to change QPushButton text and background color

Question

I am using following code to connect QMenu to QPushButton. When button is clicked a pull-down menu with multiple sub-menu’s items is shown.

button=QPushButton()
button.setText("Press Me")

font=QtGui.QFont()
button.setFont(font)
button.setSizePolicy(ToolButtonSizePolicy)

button.setPopupMode(QtGui.QToolButton.InstantPopup)
menu=QtGui.QMenu()
button.setMenu(menu)

menuItem1=menu.addAction('Menu Item1')
menuItem2=menu.addAction('Menu Item2')

Now depending on a condition I would like to customize QPushButton display by giving it a text and background color. The following line of code (which is supposed to change background color) has no effect on QPushButton connected to QMenu.

button.setStyleSheet('QPushButton {background-color: #A3C1DA}')

I would like to know how to change the background color of QPushButton as well as button’s text’s color.

Asked By: alphanumeric

||

Source

Answer 1

Apart from some inconsistencies with your code example setting the background color and text color of a QPushButton works just fine with:

setStyleSheet('QPushButton {background-color: #A3C1DA; color: red;}')

Example (using PySide):

from PySide import QtGui

app = QtGui.QApplication([])

button = QtGui.QPushButton()
button.setStyleSheet('QPushButton {background-color: #A3C1DA; color: red;}')
button.setText('Press Me')
menu = QtGui.QMenu()
menuItem1 = menu.addAction('Menu Item1')
menuItem2 = menu.addAction('Menu Item2')

button.setMenu(menu)
button.show()

app.exec_()

results in:

enter image description here

Answered By: Trilarion

Answer 2

For those who still want to change color of button with the instruction

button.setStyleSheet('QPushButton {background-color: #A3C1DA}')

and not able to do so, just modify the above instruction to

button.setStyleSheet('QPushButton {background-color: #A3C1DA; border:  none}')

And it will change the button color, so the trick is to remove the border

Answered By: Manjunatha S Kedilaya

Answer 3

I would add a comment to Trilarions answer, but not enough rep..

I was able to use his suggestion, without removing borders by

self.show() 
self.button.setStyleSheet('background-color: red;')

AFTER doing a .show()
on my application. not sure why after works but not before. If anyone can explain that would be great

Answered By: Josh Pachner

Answer 4

Change the background color when mouse is over the button

self.button.setStyleSheet(
            "QPushButton::hover{"
            "background-color: #ffd2cf;"
            "border: none;"
            "}"
        )

You can improve your button further:

self.button.setToolTip("Hell o World")
self.button.mousePressEvent = lambda v: self.button.setIconSize(QSize(25, 25))#incresing iconsize
self.button.mouseReleaseEvent = lambda v: self.button.setIconSize(QSize(20, 20))#resetting to original iconsize
self.button.setStyleSheet(
    "QPushButton::hover{"
    "background-color: #ffd2cf;"
    "border: none;"
    "}"
)
self.button.myIcon = QIcon("c:/users/user-name/Pictures/icons/delete-row.png")
self.button.setIcon(self.button.myIcon)
self.button.setIconSize(QSize(20, 20))#setting original icon size

Here’s a generic DecorableButton:

from PySide6.QtWidgets import (QPushButton)
from PySide6.QtGui import (QIcon, QMouseEvent)
from PySide6.QtCore import (Qt, QSize)


class DecButton(QPushButton):
    def __init__(self, text: str = None, size: QSize = None, iconPath: str = None,
                 iconSize: QSize = None, onPressIconSizeIncrease: QSize = None,
                 onFocusBackgroundColor: str = None, toolTip: str = None, parent=None, color=None):

        super().__init__(parent=parent)
        ##initializing UI
        self.initUI(text=text, size=size, iconPath=iconPath,
                    iconSize=iconSize, onPressIconSizeIncrease=onPressIconSizeIncrease,
                    onFocusBackgroundColor=onFocusBackgroundColor, toolTip=toolTip, color=color)
        pass

    def initUI(self, text: str = None, size: QSize = None, iconPath: str = None,
               iconSize: QSize = None, onPressIconSizeIncrease: int = None,
               onFocusBackgroundColor: str = None, toolTip: str = None, color: str = None):

        if text is not None:
            self.setText(text)

        if size is not None:
            self.setFixedSize(size)

        if iconPath is not None:
            self.buttonIcon = QIcon(iconPath)
            self.setIcon(self.buttonIcon)

        self.buttonIconSize = iconSize
        if iconSize:
            self.setIconSize(self.buttonIconSize)

        self.onPressIconSizeIncrease = onPressIconSizeIncrease

        if onFocusBackgroundColor is not None:
            self.setStyleSheet(
                "QPushButton::hover{"
                f"background-color: {onFocusBackgroundColor};"
                "border: none;"
                "}"
            )
        if color is not None:
            if onFocusBackgroundColor is None:
                self.setStyleSheet(
                    "QPushButton{"
                    f"background-color: {color};"
                    "border: none;"
                    "}"
                )
            else:
                self.setStyleSheet(
                    "QPushButton{"
                    f"background-color: {color};"
                    "border: none;"
                    "}"
                    "QPushButton::hover{"
                    f"background-color: {onFocusBackgroundColor};"
                    "border: none;"
                    "}"
                )
        self.setToolTip(toolTip)

    def mousePressEvent(self, event: QMouseEvent) -> None:
        super().mousePressEvent(event)
        if self.onPressIconSizeIncrease:
            self.setIconSize(self.onPressIconSizeIncrease)

    def mouseReleaseEvent(self, event: QMouseEvent) -> None:
        super().mouseReleaseEvent(event)
        if self.onPressIconSizeIncrease:
            self.setIconSize(self.buttonIconSize)


if __name__ == "__main__":
    from PySide6.QtWidgets import (QApplication, QWidget, QVBoxLayout, QHBoxLayout)

    app = QApplication([])
    widget = QWidget()
    widget.layout = QHBoxLayout()
    widget.button = DecButton(iconPath="c:/users/devpa/Pictures/icons/delete-row.png",
                              iconSize=QSize(25, 25), onPressIconSizeIncrease=QSize(30, 30),
                              size=QSize(35, 35), onFocusBackgroundColor='#facdcd', color='#fcf8f7')
    widget.layout.addWidget(widget.button)
    widget.setLayout(widget.layout)
    widget.show()
    app.exec()

Output Window:

Answered By: Udesh Ranjan

How to change QPushButton text and background color

Question:

Answers: