QPushButton QSS(一)：按钮常用qss

小小码农Come on2026-01-24 10:55

本文实现如下按钮的三种qss样式

按钮基本样式

bash 复制代码

QPushButton
{
	color: green; /*前景色，文本颜色*/
	background-color: rgb(223,223,223);  /*背景色*/
	border-style: outset;  /*边框风格*/
	border-width: 0.5px;    /*边框宽度*/
	border-color: rgb(10,45,110);        /*边框颜色*/
	border-radius: 10px;              /*边框圆角*/
	font: bold 22px;                  /*字体*/
	min-width: 100px;                 /*控件最小宽度*/
	min-height: 20px;                  /*控件最小高度*/
	padding: 4px;                      /*内边距*/
}

QPushButton:flat
{
	border:2px solid red;
}

/*按钮被按下时样式*/
QPushButton#pushButton:pressed
{
	background-color: rgb(40,85,20);  /*背景色*/
	border-style: inset;

	padding-left: 6px;
	padding-top: 6px;
}

/*鼠标悬浮时效果*/
QPushButton:hover
{
	color:#0000ff;;
	background-color:rgb(210,205,205);
	border-style:inset;
	padding-left:8px;
	padding-top:8px;
}

/*按钮被禁用时样式*/
QPushButton:disabled
{
	color: blue;
	border-color: brown;
	background-color:#363636;  /*背景色*/	
}

图片背景按钮

针对按钮设置正常状态、鼠标悬停（hover）、按钮点击（press）设置不同伪装态样式，实现不同状态下图片切换效果

cpp 复制代码

QPushButton
{
	background-image:url(":/resources/vip_normal.png");
	background-position:center;
	background-repeat:no-repeat;
	border:none
}

QPushButton:hover
{
	background-color:rgb(10,210,210);
	background-image:url(":/resources/vip_hover.png");
}

QPushButton:pressed
{
	background-color:rgb(255,0,0);
	background-image:url(":/resources/vip_press.png");
	padding-left:8px;
	padding-top:8px;
}

实现图片+文本展示

bash 复制代码

	ui->pushButton_3->setFixedSize(280, 200);
    ui->pushButton_3->setText(u8"svip");
    // 设置布局方向为从左到右（影响图标和文字的排列）
    ui->pushButton_3->setLayoutDirection(Qt::LeftToRight);

    QString btnStyle = "QPushButton{"
                       "background-image:url(:/resources/vip_hover.png);"
                       "background-repeat:no-repeat;"    // 背景图片不重复
                       "background-origin:padding;"      // 背景从内边距开始
                       "background-position:left;"       // 背景图片左对齐
                       "padding-left:201px;"             // 左侧内边距201px
                       "border:none;"
                       "background-color:rgb(0,255,255);"
                       "color:rgb(0,0,0);"
                       "text-align:left;"							// 文字左对齐
                       "font: bold italic 30px \"Microsoft YaHei\";"
                       "}";

    ui->pushButton_3->setStyleSheet(btnStyle);