View Full Version : Hopefully the last time: round buttons

16th May 2009, 01:44
Yesterday I found a thread with "how to shape QPushbutton" and something like

QIcon icon("myicon");

and now I am searching again and find lots of "shapings" and "round widgets", but not the mentioned code :confused:

So, can we do it one more time and then put the infos into the wiki? Round Buttons (or similiar)?

In Qt3, it was like

void TGuiObject::setBitmap(QWidget* w, const QString& file)
if( !file.isEmpty() && QFile::exists(file) ) {
QPixmap pix(file);
if( QFile::exists(file+fileMask) )
QPalette pal;
pal.setBrush(w->backgroundRole(), QBrush(pix));


I wanted the Starfleet logo to be the button. When I click it with the above code, it is not really shaped... it is still a rectangle with white corners around the round image...

16th May 2009, 10:33
Check your bitmap, if its really transparent around the white area u get in ur button.
setMask will operate on the opaque pixels, and if all pixels of you bitmap is opaque, you will get the result you ae now getting.

16th May 2009, 16:21
Ok, so I have to change from .jpg to .png. No problem. Now I have a round bitmap, thanks for that.
But when I click the button, I see only a grey background.

I read something about the style sheet property "border-radius" in the other thread - and the helps says "not available on Mac". Do I really have to reimplement the paint event?

16th May 2009, 20:07
Have you set any style sheet on button press ??
How are you using the button ?

16th May 2009, 20:10
i think stylesheet property "border-image" could very well solve the problem, but in that case, your image should only be that round thing, there shouldnt be any transparent white area around

16th May 2009, 23:46
Have you set any style sheet on button press ??
How are you using the button ?
Until now, I did not use any style sheets, as the help says, that styles on Mac currently don't work. So I'd like to set the "basics stuff" by QPushButton's methods... my code is above, I only added the shaping mask function.

i think stylesheet property "border-image" could very well solve the problem
Just to be sure, I changed it into the following code:

if( !file.isEmpty() && QFile::exists(file) ) {
QString style = w->styleSheet();
style += QString("background-image: url(%1);").arg(file);
style += QString("pressed: background-image: url(%1);").arg(file);
if( QFile::exists(file+".mask") ) {
QBitmap mask(file+".mask");

and I now see... well... some kind of bitmap :rolleyes:

17th May 2009, 12:39
The simplest way to obtain what you want is to make the png image transculent so that the transparency "blends" into the image. Then you can use QPixmap::createHeuristicMask() or QPixmap::createMaskFromColor() to get the mask and to be sure you won't have any sharp edges on the button.

There is also an alternative - subclass QPushButton or QAbstractButton and do the painting yourself.

17th May 2009, 13:16
I think I am nearby. I converted the "white" to "transparent" and saved it as png. I set the mask with the code of my first writing, and the button is displayed round. Obviously, setting the brush with an image an its mask is ok.

The only problem left is that the pressed has neither a background nor a text, so all I get is a grey pressed button rectangle. Obviously, I have to set the brush of the pressed-background role. But I do not know how?

Maybe I really should paint it on my own, to ensure that the button looks like it was pressed down a little bit?

17th May 2009, 18:55
And what stylesheet are u using for "pressed" state ?

17th May 2009, 19:48
QWidget::styleSheet : QString
Note: Qt style sheets are currently not supported for QMacStyle (the default style on Mac OS X). We plan to address this in some future release.

-> there must be an option without stylesheets, mustn't it? Currently, I am working on even that OS :cool:

17th May 2009, 20:43
there must be an option without stylesheets, mustn't it?

Sure there is. I even gave it to you...

17th May 2009, 22:16
Sorry, but I did not understand it... to clearify: do I have to paint the button on my own to get the needed result (pressed button with picture)?

Or does it make a difference if I use the QPixmap::mask() function instead of the createHeuristicMask as you wrote?

As I wrote as the response to your help: the only thing left is the undrawn picture when pressing down.

17th May 2009, 22:21
The best and probably fastest way to achieve what you want is to provide your own button class. It's essentially less than 10 lines of code if you're only after drawing and less than 15 lines of code if you also want the hit area of the button to be shaped.

23rd June 2009, 19:49
Is the problem only with QMacStyle? What you pasted, auba, states that it is the default style on the mac. Can you just set the default style to Plastique or Cleanlooks?

While I've built a qt application on/for OS X, it was in Cleanlooks and didn't use any stylesheets (and was quite awhile ago) so I'm unsure of the actual behavior. Can OS X run a different Style?

29th June 2009, 11:17
I wonder why you guys not try to use QPushButton::setFlat(true) and add a PNG as its icon.
I think it is the easiest way to create shaped button and it's platform independent.

Here's my widget. Look at the bottom-right buttons:


Is it what you want?