Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果

为了去除焦点虚线框，给按钮的样式加上了如下的样式。

QPushButton
{
    background:red;
    border:0px;
}

这样导致鼠标点击按钮之后没有按下凹陷的反馈感觉是没有点击上去似的。

      上面两个按钮加上了border:0px;去除了边框，点击之后没有凹陷的感觉，而后两个按钮没有加上border:0px;，保留了按钮原始的点击凹陷的感觉，但是为了去除矩形虚线框，我们不得已加上了border:0px;去除了边框，保留了背景色样式。这一篇中我们将自定义按钮 在鼠标 悬浮、按下、松开后的效果。

       关于自定义按钮 在鼠标 悬浮、按下、松开后的效果，一种是设置背景图，主要是需要自己设计按钮的效果图，另一种是通过样式控制不同状态下按钮的显示效果。代码很简单，效果却不一般 O(∩_∩)O哈！。

1、设置背景图方式

/*注册账户图标*/
// 正常状态下显示的效果
QPushButton#pButtonRegistAccount
{
    border-image:url(:/Resources/registeraccount.png);
}
// 鼠标悬浮状态下显示的效果
QPushButton#pButtonRegistAccount:hover
{
    border-image:url(:/Resources/registeraccount_hover.png);
}
// 鼠标按下状态下显示的效果
QPushButton#pButtonRegistAccount:pressed
{
    border-image:url(:/Resources/registeraccount_pressed.png);
}

/*忘记密码图标*/
QPushButton#pButtonForgetPassword
{
    border-image:url(:/Resources/forgetpassword.png);
}

QPushButton#pButtonForgetPassword:hover
{
    border-image:url(:/Resources/forgetpassword_hover.png);
}

QPushButton#pButtonForgetPassword:pressed
{
    border-image:url(:/Resources/forgetpassword_pressed.png);
}

这里我们需要准备几张图片：

运行效果图：

登录按钮效果背景图片

资源图片：

效果图：

2.通过设置样式控制不同显示结果

QPushButton#pButtonOk
{
    color:white;
    background-color:rgb(14 , 150 , 254);
    border: 1px solid rgb(11 , 137 , 234);
}

QPushButton#pButtonOk:hover
{
    color:white;
    background-color:rgb(44 , 137 , 255);
    border: 1px solid rgb(11 , 137 , 234);
}

QPushButton#pButtonOk:pressed
{
    color:white;
    background-color:rgb(14 , 135 , 228);
    border: 1px solid rgb(12 , 138 , 235);
    padding-left:3px;
    padding-top:3px;
}

QPushButton#pButtonCancel
{
    color:black;
    background-color:rgb(238 , 238 , 238);
    border: 1px solid rgb(183 , 183 , 183);
}

QPushButton#pButtonCancel:hover
{
    color:black;
    background-color:rgb(228 , 240 , 250);
    border: 1px solid rgb(15 , 150 , 255);
}

QPushButton#pButtonCancel:pressed
{
    color:black;
    background-color:rgb(204 , 228 , 247);
    border: 1px solid rgb(1 , 84 , 153);
    padding-left:3px;
    padding-top:3px;
}

登录按钮效果样式

QPushButton
{
    font-family:Microsoft Yahei;
    color:white;
    background-color:rgb(14 , 150 , 254);
    border-radius:5px;
}

QPushButton:hover
{
    background-color:rgb(44 , 137 , 255);
}

QPushButton:pressed
{
    background-color:rgb(14 , 135 , 228);
    padding-left:3px;
    padding-top:3px;
}