Qt QPushButton水晶按钮样式例子

hss2799

已于 2022-05-28 17:19:26 修改

阅读量6.1k

点赞数 12

分类专栏： Qt 文章标签： qt html css

于 2021-02-26 11:19:20 首次发布

本文链接：https://blog.youkuaiyun.com/hss2799/article/details/114120739

版权

Qt 专栏收录该内容

71 篇文章

订阅专栏

1.这几个都是代码实现的，不使用图片，具体实现如下：

实现方式就是设置这5个位置的颜色值（用取色值的工具就可以获取到RGB值）和边框颜色值就好

按照上述的位置取值，再以下例子，供大家参考：


QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(250, 204, 246, 255), /*第1个颜色值*/
stop:0.25 rgba(243, 144, 236, 255), /*第2个颜色值*/
stop:0.5 rgba(238, 81, 223, 255), /*第3个颜色值*/
stop:0.65 rgba(239, 92, 225, 255), /*第4个颜色值*/
stop:1 rgba(249, 186, 243, 255));/*第5个颜色值*/
border: 2px solid rgb(240,102,255);/*边框颜色值*/
 border-radius: 10px;
}


QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(204, 250, 227, 255), /*第1个颜色值*/
stop:0.25 rgba(126, 242, 185, 255), /*第2个颜色值*/
stop:0.5 rgba(76, 237, 157, 255), /*第3个颜色值*/
stop:0.65 rgba(91, 239, 166, 255), /*第4个颜色值*/
stop:1 rgba(184, 248, 217, 255));/*第5个颜色值*/
border: 2px solid rgb(78,238,158);/*边框颜色值*/
 border-radius: 10px;
}


QPushButton {
background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(249, 202, 201, 255), /*第1个颜色值*/
stop:0.25 rgba(242, 126, 126, 255), /*第2个颜色值*/
stop:0.5 rgba(237, 78, 78, 255), /*第3个颜色值*/
stop:0.65 rgba(238, 89, 89, 255), /*第4个颜色值*/
stop:1 rgba(247, 175, 175, 255));/*第5个颜色值*/
border: 2px solid rgb(237,80,78);/*边框颜色值*/
 border-radius: 10px;
}


QPushButton {

background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(199, 238, 249, 255), 
stop:0.25 rgba(132, 217, 243, 255), 
stop:0.5 rgba(80, 200, 238, 255), 
stop:0.65 rgba(87, 203, 239, 255), 
stop:1 rgba(186, 233, 249, 255));
 border: 2px solid rgb(106,208,240);
 border-radius: 10px;
}


QPushButton {

background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(247, 250, 204, 255), 
stop:0.25 rgba(236, 243, 133, 255), 
stop:0.5 rgba(226, 237, 76, 255), 
stop:0.65 rgba(229, 239, 91, 255), 
stop:1 rgba(229, 233, 160, 255));
 border: 2px solid rgb(225,238,78);
 border-radius: 10px;
}

常用的有如下几个：
/*按钮按下*/
QPushButton:pressed{
}

/*按钮选中*/
QPushButton:checked{
}

/*鼠标划过*/
QPushButton:hover{
}

2.不使用图片的，纯代码写的样式也可以这样：

.QPushButton {
        background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(233, 233, 233, 255), 
stop:0.35 rgba(220, 220, 220, 255), 
stop:0.5 rgba(213, 213, 213, 255), 
stop:0.65 rgba(230, 230, 230, 255), 
stop:1 rgba(242, 242, 242, 255));
 border: 1px solid rgb(128,126,126);
 border-radius: 5px;
}
.QPushButton:hover{
        background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(250, 250, 250, 255), 
stop:0.5 rgba(255, 255, 255, 255), 
stop:1 rgba(250, 250, 250, 255));
 border: 1px solid rgb(63,140,161);
 border-radius: 5px;
}

.QPushButton:pressed{
        background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(255, 255, 255, 255), 
stop:0.5 rgba(235, 247, 253, 255), 
stop:1 rgba(213, 237, 250, 255));
 border: 1px solid rgb(3,110,183);
 border-radius: 5px;
}

3.如果不想写纯代码的样式，可以使用图片的样式

QPushButton {
border-image: url(:/image/functionButtons/normal_button_hover.png);
}

.QPushButton:hover{
border-image: url(:/image/functionButtons/normal_button_pressed.png);
}

.QPushButton:pressed{
border-image: url(:/image/functionButtons/normal_button.png);
}