Qt有金属质感的3D按钮样式

在用Qt设计按钮时若采用默认样式，效果往往欠佳，这里给出一个有金属质感的3D按钮样式。为了展示效果，以工具栏按钮和普通按钮分别举例：

普通按钮

复制代码

QPushButton {
        background-color: rgb(12, 45, 64);
        color: rgb(255, 255, 255);
        border-bottom: 2px solid rgb(50,50,50);
        border-right: 2px solid rgb(50,50,50);
        border-top: 2px solid rgb(120,120,120);
        ;
        border-left: 2px solid rgb(120,120,120);
        ;
        padding-left: 1px;
        padding-top: 1px;
}

    QPushButton:disabled {
        background-color: rgb(12, 45, 64);
        color: rgb(128, 128, 128);
        font: 10pt"宋体";
        border-radius: 5px;
        border-bottom: 2px solid rgb(120,120,120);
        border-right: 2px solid rgb(120,120,120);
        border-top: 2px solid rgb(50,50,50);
        border-left: 2px solid rgb(50,50,50);
    }

    QPushButton:hover {
        background-color: rgb(22, 65, 84);
    }

    QPushButton:pressed {
    background-color: rgb(12, 45, 64);
    color: rgb(255, 255, 255);
    font: 10pt"宋体";
    border-radius: 5px;
    border-bottom: 2px solid rgb(120,120,120);
    border-right: 2px solid rgb(120,120,120);
    border-top: 2px solid rgb(50,50,50);
    border-left: 2px solid rgb(50,50,50);
    }

工具栏按钮

复制代码

QToolBar
{
font: 12pt"宋体";
background: rgb(87,91,108);
}

		QToolButton {
        background-color: rgb(87, 91, 108);
        color: rgb(255, 255, 255);
        border-bottom: 2px solid rgb(50,50,50);
        border-right: 2px solid rgb(50,50,50);
        border-top: 2px solid rgb(120,120,120);
        border-left: 2px solid rgb(120,120,120);
        ;
        padding-left: 1px;
        padding-top: 1px;
		}
		QToolButton:hover {
		    background-color: rgb(250,135,116);
		}
		QToolButton:pressed {
		    background-color: #FFA500;
		    border: 1px solid #FF8C00;
		}
		QToolButton:checked {
		    background-color: rgb(90,127,246);
		}

    QTabBar::tab {
        background:rgb(87, 91, 108);
        color: rgb(255,255,255);
        border: 1px solid #ccc;
        padding: 5px;
        font-size: 14px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    QTabBar::tab:selected {
        background: rgb(90,127,246);
        border-bottom-color: #f0f0f0;
    }
    QTabBar::tab:hover {
        background: rgb(80, 15, 20);
    }

打开Qt设计师软件，选中要设计样式的按钮，在如下图所示的栏目中粘贴上述样式代码即可实现效果。