Qt：Qss 样式设置（01）- Buttons

---

---

一、QPushButton

1. 基础设置

/*  基本样式 */  
QPushButton{
	border:1px solid #4daa99;
	color:#e3e3e3;
	padding:4px 20px;
}

/*  悬浮时 */  
QPushButton:hover{
	background: #1f6155;
	color:#f2f2f2;
}

/*  按下时 */  
QPushButton:pressed{
	background: #34a897;
	color:#f2f2f2;
	border-radius: 3px;
	/* 改变边框风格 */  
    border-style:inset;
    /* 使文字有一点移动 */  
    padding-left:6px;  
    padding-top:6px;  
}

/* 按钮样式 */  
QPushButton:flat {  
    border:2px solid red;  
}  

/* 当按钮打开菜单时:ui->pushButton->setMenu(btnMenu) */  
QPushButton:open{  
    background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);  
}  

/* 子选择器:菜单 */  
QPushButton::menu-indicator {  
    image:url(:/res/button/close.png);  
    
    /* 去掉小三角号   
    image:none;*/  
    
    /* 绘制subcontrol 的参考矩形的位置 */  
    subcontrol-origin:padding;  

    /* 小三角的位置 */  
    subcontrol-position:bottom right;  
}  

QPushButton::menu-indicator:pressed,QPushButton::menu-indicator:open {  
    position:relative;  
    top:4px;  
    left:4px;  
} 

2. 常用样式模板

QPushButton{
    background-color: #2786ba;				/* 背景颜色 */
    border-radius:5px;					    /* 按钮边框的圆角设置 */
   
    /* 按钮背景图标设置 */
    background-image: url(:/res/button/btn.png);  /* 背景图片 */
    background-origin: content;
    background-position: center;			/* 背景图片的位置 */
    padding-right: 40px;				    /* 背景图标的padding参数 */
    padding-bottom: 2px;					/* 背景图标的padding参数 */
    background-repeat: no-repeat;			/* 设置背景图像的平铺模式 */

    /* 按钮文本设置 */
    text-align: top;						/* 文本的位置 */
   	padding:4px;  
    font:bold 14px; 
    color: #FFF;							/* 文本颜色 */
}

二、QToolButton

1. 基础设置

QToolButton{
	padding:5px;
	background:transparent;
	color:#bebebe;
	border-style:none;
	border:1px solid #B2B6B9;
	min-height:15px;
	border-radius:5px;
}

QToolButton:hover{
	background: #1f6155;
	color:#f2f2f2;
}
QToolButton:pressed{
	background: #34a897;
	color:#f2f2f2;
	border-radius: 3px;
}

2. 详细设置

QToolButton::menu-indicator{
	image:None;
}
 
QToolButton#btnMenu,QToolButton#btnTool,QPushButton#btnMin,QPushButton#btnMax,QPushButton#btnClose{
	border-radius:3px;
	color:#000000;
	padding:3px;
	margin:0px;
	background:none;
	border-style:none;
}
 
QToolButton#btnMenu:hover,QPushButton#btnMin:hover,QPushButton#btnMax:hover{
	color:#FFFFFF;
	margin:1px 1px 2px 1px;
	background-color:rgba(51,127,209,230);
}
 
QToolButton#btnTool:hover{
    color:#FFFFFF;
    margin:1px 1px 2px 1px;
    background-color:rgba(51,127,209,230);
}
 
QToolButton#btnTool:hover{  /*鼠标放上后*/
    color:rgb(255, 255, 255);
    min-height:20;
    border-style: solid;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),  stop: 0.3 rgb(160,160,160),  stop: 1 rgb(120,120,120));
    border:1px;
    border-radius:5px;
    padding:2px 4px;
}
 
QToolButton#btnTool:pressed{ /*按下按钮后*/
    color:rgb(255, 255, 255);
    min-height:20;
    border-style:solid;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),  stop: 0.3 rgb(190,190,190),  stop: 1 rgb(160,160,160));
    border:1px;
    border-radius:5px;
    padding:2px 4px;
}
 
QToolButton#btnTool:checked{    /*选中后*/
    color:rgb(255, 255, 255);
    min-height:20;
    border-style:solid;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 rgb(226,236,241),  stop: 0.3 rgb(190,190,190),  stop: 1 rgb(160,160,160));
    border:1px;
    border-radius:5px;
    padding:2px 4px;
}

QMenu::icon:checked {
    background: #a3d1ff;
    border: 1px solid #3399ff;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}