Same style for QPushButton and QToolButton during mouse-over

Question

Is it possible to make QPushButton and QToolButton look identical during mouse-over, i.e. the look and feel for hover events?

I don't use custom stylesheets, but there is a global application setting:

QtGui.QApplication.setStyle("plastique")

I'm looking for something like "propagate" the current (system-default) mouse-over-stylesheet of a QPushButton to a QToolButton. By default, a QPushButton will be highlighted during mouse-over, while a QToolButton does nothing at all.

Environment: Qt 4.8.6, running on Linux CentOS 6 and Windows 7

So basically you are saying you just want to disable hover effect on QPushButton, this isnt actually anything to do with QToolButton right? — AngryDuck, Jun 01 '15 at 08:50
No, I would like to **enable** the hover effect on QToolbutton (to look like a QPushbutton). — Stefan Bohlein, Jun 01 '15 at 11:14
The easiest way is going to be to create a custom style sheet, giving similar styles to both buttons. The system style behaviors tend to be baked in, and not easily manipulated when they don't have an API call. — Nicolas Holthaus, Jun 01 '15 at 12:44

score 1 · Answer 1 · answered Jul 28 '15 at 07:17

Taking Nicolas answer as starting point, I created an own CSS style sheet:

QPushButton,QToolButton {

  background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fdfbf7, stop: 1 #cfccc7);
  border-width: 1px;
  border-color: #8f8f91;
  border-style: solid;
  border-radius: 3px;
  padding: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

QToolButton[popupMode="1"] {

  padding-right: 18px;
}

QToolButton::menu-button {

  border-width: 1px;
  border-color: #8f8f91;
  border-style: solid;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  /* 16px width + 2 * 1px for border = 18px allocated above */
  width: 16px;
}

QPushButton:hover,QToolButton:hover {

  border-top-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #b2afaa, stop: 0.5 #4847a1, stop: 1 #7e7cb6);
  border-radius: 1px;
  border-top-width: 3px;
  border-bottom-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #7e7cb6, stop: 0.5 #4847a1, stop: 1 #b2afaa);
  border-bottom-width: 3px;
  background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e4e0e1, stop: 1 #cfcbcd);
}

QPushButton:pressed,QToolButton:pressed {

  background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #cfcbcd, stop: 1 #e4e0e1);
  border-width: 1px;
  border-color: #8f8f91;
}

QPushButton:focus,QToolButton:focus {

  outline: none;
}

To apply the style, I used the following PyQT code snippet:

cssFile = os.path.join(self.installDir, "etc", "Buttons.css")
with open(cssFile, "r") as fh:
    cssStyleSheet = "".join(fh.readlines())

    for i in range(self.verticalLayout.count()):
        widget = self.verticalLayout.itemAt(i).widget()
        if isinstance(widget, QtGui.QPushButton) or isinstance(widget, QtGui.QToolButton):
            widget.setStyleSheet(cssStyleSheet)
        # Make Tool- and PushButton same height...
        if isinstance(widget, QtGui.QToolButton):
            widget.setMaximumHeight(self.firstPushButton.sizeHint().height())

The resulting look and feel is almost identical to the default "plastique" style, if the application background color is set to "#ede9e3".

At first, I applied the style sheet to all Tool- and PushButtons (i.e. system default). But after this, all buttons in dialogs lost there default width. So I decided to apply the style only to the buttons inside of the vertical layout, which contains all involved buttons.

Same style for QPushButton and QToolButton during mouse-over

1 Answers1