How to create a circular button in Qt Designer

Question

I'm working on Python project using Qt Designer as the GUI creator. I tried to create a circular button, but there is only QPushButton, which is a square. I also tried to bind a click event to a circular image, but I do not know how to do that.

Solution

You should be able to get a round button by using a stylesheet.

Add a QPushButton in Qt Desgner and set its width and height to 40. Then right-click the button, select "Change stylesheet...", and paste in the following stylesheet:

QPushButton {
    color: #333;
    border: 2px solid #555;
    border-radius: 20px;
    border-style: outset;
    background: qradialgradient(
        cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
        radius: 1.35, stop: 0 #fff, stop: 1 #888
        );
    padding: 5px;
    }

QPushButton:hover {
    background: qradialgradient(
        cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4,
        radius: 1.35, stop: 0 #fff, stop: 1 #bbb
        );
    }

QPushButton:pressed {
    border-style: inset;
    background: qradialgradient(
        cx: 0.4, cy: -0.1, fx: 0.4, fy: -0.1,
        radius: 1.35, stop: 0 #fff, stop: 1 #ddd
        );
    }

For more about styling buttons, see Customizing a QPushButton Using the Box Model and also the Qt Stylesheets Reference.

Comments

[Pandarian Ld]

Thank you very much. ;))