Specific QPushButton style

Question

How can I customize the look of a QPushButton or QToolButton to look something like elementaryos's webpage "buttons"?

All I really want is the characteristic image position and the text on it's side, maybe if i'm lucky i can also get a border like that, but i don't really need the little description below the title :) Can i do it only with StyleSheets, or do i have to subclass QPushButton/QAbstractButton/Something like that? I already searched everywhere but didn't found that level of customization without things like painting something in a fixed place, which is exactly what i don't want.

EDIT: I really would like a solution that would get me a customizable button, not a fixed image one, something in the tracks of

MainWindowButton(QString(title), /*opt*/QString(description), QImage(icon));

Answer 1

There are a number of approaches that may work.

You might first consider trying to compose a solution with a normal QPushButton with a QVBoxLayout on it. You could add three QLabels; one for the title text, one for the caption text and one for the image. Some CSS could probably be used to render the background image of the button for up and down and more CSS to style the text in the two labels and position the image on the third but you would then find that the labels don't shift down when the button is clicked.

I think the best solution involves direct painting. You could do this by sub classing a QWidget and overriding the paintEvent(). Render everything for the up state and shift everything over and down a bit for the down state.

You could achieve this without sub classing by rendering the up and down states to a QImage and styling a QPushbutton with them using CSS.

There are a number of combinations of these approaches too.

Answer 2

You can set the background as white with the icon in the right corner with some creative use of the border-image stylesheet property where the bottom border is as tall as the icon and the top, left and right borders are 0 pixels wide. You'll need to make a custom image that basically looks like the icon with a couple pixels width on the left and top that are white

http://doc.qt.digia.com/qq/qq20-qss.html#theboxmodel

The text you may have to do overriding paintEvent.