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.

Some inconsistencies with your code: ToolButtonSizePolicy is not defined and only QToolButtons have setPopupMode, not QPushButtons. For the stylesheet it doesn't matter if it is a QToolButton or a QPushButton. Your stylesheet should have worked. — NoDataDumpNoContribution, Jul 10 '14 at 07:51

score 41 · Accepted Answer · answered Jul 10 '14 at 07:50

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

score 7 · Answer 2 · answered Apr 09 '19 at 04:48

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

score 0 · Answer 3 · answered Jun 20 '20 at 17:29

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

Udesh · Answer 4 · 2022-07-23T05:24:14.777

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:

score 0 · Answer 5 · answered Aug 12 '22 at 11:57

0

Changing button's text:

from PyQt5.QtWidgets import QPushButton

button = QPushButton("Some text")
button.setText('New text')

Changing button's background color:

from PyQt5.QtWidgets import QPushButton

button = QPushButton("Some text")
button1.setStyleSheet("background-color: red");

# or
# button2.setStyleSheet("background-color:#ff0000;");
# or
# button3.setStyleSheet("background-color:rgb(255,0,0)");

answered Aug 12 '22 at 11:57

Scott

4,974
6
35
62

when I do this, the button always shows "New text"? – Ben Oct 06 '22 at 11:44
If you just want to change the style, just use `.setStyleSheet()` method. My answer is for given question actually, that's why I showed updating text as well – Scott Oct 06 '22 at 12:32
Actually, I only wanna' change the text on the button. But as described, it shows immediately the text via " setText() "? – Ben Oct 06 '22 at 12:36
@Ben, yes man )) – Scott Oct 06 '22 at 13:59

How to change QPushButton text and background color

5 Answers5

Linked

Related