How to create custom 3D looking button in Qt?

Question

I'm trying to create the following custom button:

To do this I've create the class and overrided paintEvent:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QPen pen(Qt::darkGray, 7, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/2.1,height()/2.1);

    QPen pen2(Qt::lightGray, 3, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen2);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/2.15, height()/2.15);

    QPen pen1(Qt::gray, 1, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen1);
    painter.drawEllipse(QPointF(width()/2, height()/2), width()/3.5, height()/3.5);
}

But, I'm not able to create the button like below with appropriate gradients and picture in the center. Can you please help me?

What exactly is the problem? (your code seem in the correct direction) — Adrian Maire, May 01 '17 at 08:45
The problem is button like effect and color as in the picture. — elgolondrino, May 01 '17 at 08:48
It is possible to draw such a button via QPainter but it is not the most straightforward method. The button image you posted has most likely been created in software like photoshop and exported and used as an image in the application. — dtech, May 01 '17 at 08:48

dtech · Answer 1 · 2017-05-01T20:01:04.090

The key thing here is to make the gradients. And you cannot make gradients on strokes, only on fills. Meaning that you will have to implement the outline as a fill.

There is the button's components digested, listed in the order you should draw them:

Mind you that only the first component is a solid color, everything else is gradients. It is those gradients which get the effect.

In order to get gradients for the inner ring you will have to use QPainterPath, fist add the outer circle, and then add a slightly smaller inner circle, which will effectively punch a hole in the first circle, giving you something that looks like an outline but is actually a fill, a fill you can use a gradient on.

As mentioned in the comments - this involves a lot of operations and is not ideal. It would be preferable to have such buttons as images instead of painting them with QPainter.

Update: here is some more help, to show you how to draw a gradient outline in order to achieve some 3D illusion:

class Test : public QWidget {
    Q_OBJECT
  public:
    Test() { resize(200, 200); }
    void paintEvent(QPaintEvent *) {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);
        painter.fillRect(rect(), Qt::gray);

        QPainterPath p;
        p.addEllipse(rect().center(), 50, 50);
        p.addEllipse(rect().center(), 45, 45);

        QLinearGradient g(QPointF(0, 50), QPointF(0, 150));
        g.setColorAt(0, Qt::white);
        g.setColorAt(1, Qt::black);

        QBrush b(g);
        painter.fillPath(p, b);

        QPainterPath p2;
        p2.addEllipse(rect().center(), 45, 45);
        p2.addEllipse(rect().center(), 40, 40);

        QLinearGradient g1(QPointF(0, 50), QPointF(0, 150));
        g1.setColorAt(0, Qt::black);
        g1.setColorAt(1, Qt::white);

        QBrush b1(g1);
        painter.fillPath(p2, b1);

        QPainterPath p3;
        p3.addEllipse(rect().center(), 40, 40);
        painter.fillPath(p3, b);
    }
};

And the result:

@elgolondrino - see the answer update, it contains everything you need to be able to draw you button. You simply have to fine tune the gradients and colors. — dtech, May 01 '17 at 19:53

score 1 · Answer 2 · answered May 01 '17 at 08:56

Considering the question reworded as:

How to use QPainter to generate the given picture?

Using QPainter:

Get a vectorial image of the button, ideally in SVG.
Look the SVG code to extract colors, gradients, sizes, etc.
Reproduce them with QPainter, you will see that for each SVG command, you have an nearly equal equivalent in QPainter. QPainterPath will help.

Using QPixmap:

Get an SVG image of your button
Use QSvgRenderer to generate a QImage of the given size, and then convert it to a QPixmap.
Paint the QPixmap when required.

Benefits of each options:

QPixmap is simpler, and allows you to switch the button aesthetic easily.
QSvgRenderer allows you to manage hover easily
QPainter allows you to override colors with those of the OS
QPainter give you more flexibility for effects, animations, etc.

How to create custom 3D looking button in Qt?

2 Answers2