前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享鼠标悬停按钮样式表

分享鼠标悬停按钮样式表

作者头像
Qt君
发布2019-08-27 17:20:23
1.4K0
发布2019-08-27 17:20:23
举报
文章被收录于专栏:跟Qt君学编程

不多说直接上代码。

红色悬停样式表1

代码语言:javascript
复制
/* Red Button */
QPushButton#RedButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #f44336;
}

QPushButton#RedButton:hover {
    background-color: #f44336;
    color: white;
}

QPushButton#RedButton:pressed {
    background-color: #06AD56;
}

红色悬停样式表2

代码语言:javascript
复制
/* Red Button 2 */
QPushButton#RedButton2 {
    background-color: #f44336;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#RedButton2:hover {
    background-color: white;
    border: 2px solid #f44336;
    color: black
}

QPushButton#RedButton2:pressed {
    background-color: #06AD56;
}

蓝色悬停样式表1

代码语言:javascript
复制
/* Blue Button */
QPushButton#BlueButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #008cba;
}

QPushButton#BlueButton:hover {
    background-color: #008cba;
    color: white;
}

QPushButton#BlueButton:pressed {
    background-color: #06AD56;
}

蓝色悬停样式表2

代码语言:javascript
复制
/* Blue Button 2 */
QPushButton#BlueButton2 {
    background-color: #008cba;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#BlueButton2:hover {
    background-color: white;
    border: 2px solid #008cba;
    color: black
}

QPushButton#BlueButton2:pressed {
    background-color: #06AD56;
}

绿色悬停样式表1

代码语言:javascript
复制
/* Green Button */
QPushButton#GreenButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

QPushButton#GreenButton:hover {
    background-color: #4CAF50;
    color: white;
}

QPushButton#GreenButton:pressed {
    background-color: #06AD56;
}

绿色悬停样式表2

代码语言:javascript
复制
/* Green Button 2 */
QPushButton#GreenButton2 {
    background-color: #4CAF50;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#GreenButton2:hover {
    background-color: white;
    border: 2px solid #4CAF50;
    color: black
}

QPushButton#GreenButton2:pressed {
    background-color: #06AD56;
}

灰色悬停样式表1

代码语言:javascript
复制
/* Gray Button */
QPushButton#GrayButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

QPushButton#GrayButton:hover {
    background-color: #e7e7e7;
    color: white;
}

QPushButton#GrayButton:pressed {
    background-color: #06AD56;
}

灰色悬停样式表2

代码语言:javascript
复制
/* Gray Button 2 */
QPushButton#GrayButton2 {
    background-color: #e7e7e7;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#GrayButton2:hover {
    background-color: white;
    border: 2px solid #e7e7e7;
    color: black
}

QPushButton#GrayButton2:pressed {
    background-color: #06AD56;
}

黑色悬停样式表1

代码语言:javascript
复制
/* Black Button */
QPushButton#BlackButton {
    border-radius: 8px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

QPushButton#BlackButton:hover {
    background-color: #555555;
    color: white;
}

QPushButton#BlackButton:pressed {
    background-color: #06AD56;
}

黑色悬停样式表2

代码语言:javascript
复制
/* Black Button 2 */
QPushButton#BlackButton2 {
    background-color: #555555;
    border-radius: 8px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    color: white;
}

QPushButton#BlackButton2:hover {
    background-color: white;
    border: 2px solid #555555;
    color: black
}

QPushButton#BlackButton2:pressed {
    background-color: #06AD56;
}

总结

修改下列属性即可快速修改该样式的显示颜色。

代码语言:javascript
复制
background-color: #555555;
border: 2px solid #555555;

关于更多

  • 源码示例 https://github.com/aeagean/QSS.git
  • Qt君公众号后台回复"QSS"获取更多相关信息。
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 红色悬停样式表1
  • 红色悬停样式表2
  • 蓝色悬停样式表1
  • 蓝色悬停样式表2
  • 绿色悬停样式表1
  • 绿色悬停样式表2
  • 灰色悬停样式表1
  • 灰色悬停样式表2
  • 黑色悬停样式表1
  • 黑色悬停样式表2
  • 总结
  • 关于更多
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档