How can I create a 3 state custom push button?

Question

I need to create a custom push button which will have 3 different background images corresponding to the following states:

normal
mouse over
mouse down

I would like to have a QHBoxLayout with 3 parts for left side, right side and middle side (stretching side) for the button.

Inside the middle size, I would like to have a label to show the text.

I need this button to have a "clicked" event as well.

I have been doing a lot of search to achieve this but I am really lost. I tried many things including custom widget from QWidget or styling QPushButton with stylesheets but I failed to achieve having 3 images for 3 mouse states and the clicked event.

I am looking for help.

Might be overkill but how about a `QStateMachine` with 3 `QState`s? — dschulz, Dec 29 '12 at 02:46

score 2 · Accepted Answer · answered Dec 29 '12 at 20:03

You can use the border-image property, by composing a single image for each state like this:

           |              |
Left Image | Middle Image | Right Image
           |              |

then by specifying the left and right image sizes as the border slice sizes and in the border widths of the stylesheet. For example, if the right images were 25 pixel wide and the left ones 20, you would have:

QPushButton {
    border-image: url(:/normal.png) 0 25 0 20 stretch stretch; 
    border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover { 
    border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed { 
    border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}

The values represent the distance between the top, right, bottom and left sides of the image.

this is sexy. Really. Wonderful answer! Thanks a lot! I looked for this so much, this is bril! — Phil, Dec 29 '12 at 20:07

score 1 · Answer 2 · answered Dec 29 '12 at 07:30

1

well,first,you should have 3 picture for 3 states,and then you can use function setStyleSheet .

QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}"
        "QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}"
        "QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");

answered Dec 29 '12 at 07:30

Magical

263
3
10

Hi @newUser. Thank you for your kind answer however I don't think that it solves my issue. I would like my custom button to be resizable as the text grows or shrinks, therefore I need 3 images for each state as I stated in my question: left, middle (expands), right. So I think I need to extend QWidget and create a custom one with layouts. But I don't know how to change layout of a qwidget on mouse states and hide the rest, and incorporate the "clicked" signal. – Phil Dec 29 '12 at 13:05

How can I create a 3 state custom push button?

2 Answers2