Qt World Summit: Submit your Presentation

Custom button with custom states and images

  • Hello,

    I am new at QT (I used another software called Altia Design for visualization), and I would like to make custom buttons. However I don't know where to start, what classes from QT to inherit in order to do what I want.

    The images of my button are stored in .png formats.

    Basically, it shall have the following states:

    • Unpressed.
    • Pressed.
    • Unpressed with a different icon (representing that the action performed behind the button is completed).
    • Unpressed locked (you cannot press it, again a different icon).

    My software shall be able to trigger any state, and also to display a custom animation (loading) around the button. It was really easy in the other software but I don't know where to start here. Any advise?

    Thank you in advance for your help.

  • Qt uses a css-like syntax to determining apparence of the widgets, see http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qpushbutton for an introductory example.

  • Hello VRonin,

    Thank you for your answer. However, I already checked this page and as far as I understood stylesheets are used to change the appearance of an existing object. It doesn't change the logic behind the button (states, and triggers) . Am I correct?

    My expected behavior would be the following:

    1. The button is pressed then released (display pressed and release).
    2. The loading effect is displayed around the button (waiting for my software to perform the related actions).
    3. When the software has finished to perform the actions, the leading animation is stopped and hidden, and the button icon changes to another icon (loaded).
    4. If the user presses again the button, it comes back to step 1.

    Are Stylesheets sufficient to realize this behavior?


  • Stylesheets can handle everything you said but the animation.
    To implement that I'd subclass QWidget and put a QPushButton and a QLabel on top of each other (manually or put them in the same cell of a QGridLayout), assign a QMovie vith the animation to the label and connect the QPushButton::clicked signal to QLabel::show slot.
    When the work is finished just call the QLabel::hide slot

    for the loaded/non loaded icon on the button you can either call QPushButton::setIcon() with a different icon or subclass QPushButton, add a Q_PROPERTY that stores the state of the button (loaded/non loaded) and let the stylesheet take care of setting the right icon

Log in to reply