1.前序

启发于 edge 更新 web 页面，觉得人家做的体验挺好

决定在Qt实现，方便以后使用

2.效果演示

特性介绍：

• 默认蓝色
• 鼠标移入 渐变色，鼠标变为小手
• 鼠标移出 恢复蓝色，鼠标恢复箭头
• 鼠标点击 墨绿色
• 鼠标按下并移出 灰色 | 标识取消

演示 GIF：

实际 hover 效果：

3.代码如下

#include <QWidget>
#include <QDebug>
#include <QPushButton>
#include <QMouseEvent>
#include <QVBoxLayout>

const static QString BtnNormalStyleSheet = "QPushButton {"
                                        "    background-color: #29B5D5;"   // Default blue background
                                        "    color: white;"                // White text
                                        "    border-radius: 5px;"         // Rounded corners
                                        "    width:200px;"
                                        "    height:50px;"
                                        "    font-weight: bold;"
                                        "    font-size: 20px;"
                                        "    padding: 0px 0px;"          // Adjust padding
                                        "}"
                                        "QPushButton:hover {"
                                        "    background-color: qlineargradient("
                                        "        spread:pad, x1:0.6, y1:0, x2:0, y2:0.8, "  // Top to bottom gradient
                                        "        stop:0 #29B5D5, stop:1 #01FFFF"        // Lighter blue to default blue
                                        "    );"
                                        "}"
                                        "QPushButton:pressed {"
                                        "    background-color: #1B788E;"   // Darker blue when pressed
                                        "}";
const static QString BtnPressedMoveOutside = "QPushButton {"
                                             "    background-color: #474747;"   // Default blue background
                                             "    color: white;"                // White text
                                             "    border-radius: 5px;"         // Rounded corners
                                             "    width:200px;"
                                             "    height:50px;"
                                             "    font-weight: bold;"
                                             "    font-size: 20px;"
                                             "    padding: 0px 0px;"          // Adjust padding
                                             "}";

class CustomButton : public QPushButton {
    Q_OBJECT
public:
    explicit CustomButton(const QString& text, QWidget* parent = nullptr)
        : QPushButton(text, parent) {
        setMouseTracking(true);
        setStyleSheet( BtnNormalStyleSheet );
    }

protected:

    void enterEvent(QEvent* event) override {
        setCursor(Qt::PointingHandCursor);  // Change to hand cursor
        QPushButton::enterEvent(event);
    }

    void leaveEvent(QEvent* event) override {
        unsetCursor();  // Revert to the default cursor
        QPushButton::leaveEvent(event);
    }

    void mouseReleaseEvent(QMouseEvent* event) override {
        qDebug() << "mouseReleaseEvent";
        isPressed = false;
        if (isMouseOutside) {
            setStyleSheet( BtnNormalStyleSheet );
        }
        QPushButton::mouseReleaseEvent(event);
    }

    void mousePressEvent(QMouseEvent* event) override {
        qDebug() << "mousePressEvent";
        isPressed = true;
        QPushButton::mousePressEvent(event);
    }

    void mouseMoveEvent(QMouseEvent* event) override {
        qDebug() << "mouseMoveEvent" << isPressed;
        if (isPressed ) {
            if (!rect().contains(event->pos())) {
                isMouseOutside = true;
                setStyleSheet( BtnPressedMoveOutside ); // Mouse has moved outside the button, change to black
            } else {
                isMouseOutside = false;
                setStyleSheet( BtnNormalStyleSheet );
            }
        }
        QPushButton::mouseMoveEvent(event);
    }
private:
    bool isPressed = false;
    bool isMouseOutside = false;
};