devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

qt-qss之按键样式_qss按钮

作者：笔触狂放9 | 2024-03-23 19:53:32

赞

踩

qss按钮

一、前言

        本篇文章没有什么技术和精华，仅作为记录一下按键的qss配置风格，目前用了3种风格，后续有更好看的也会更新在本博客中 

二、环境

qt5.7

windows

三、正文

按键qss风格配置了按键常规样式、失能样式、可选情况下的未选择样式、鼠标悬停honver样式、鼠标按下未抬起样式

风格1：

可选择按键：

 qss:

  1. QPushButton:checked{
  2. color: #ffffff; 
  3. background-color: rgb(55, 156, 212);
  4. border-right:0px solid #aaaaaa; 
  5. border-bottom:0px solid #aaaaaa;
  6. border-left:0px solid #aaaaaa;
  7. border-top:0px solid #aaaaaa; 
  8. border-top-left-radius:10px;
  9. border-bottom-left-radius:10px;
  10. border-top-right-radius:10px;
  11. border-bottom-right-radius:10px;
  12. }
  13. QPushButton:checked:hover{
  14. color: #ffffff; 
  15. background-color: rgb(43, 124, 168);
  16. border-right:0px solid #aaaaaa; 
  17. border-bottom:0px solid #aaaaaa;
  18. border-left:0px solid #aaaaaa;
  19. border-top:0px solid #aaaaaa; 
  20. border-top-left-radius:10px;
  21. border-bottom-left-radiu:10px;
  22. border-top-right-radius:10px;
  23. border-bottom-right-radius:10px;
  24. }
  25. QPushButton:checked:pressed{
  26. color: #ffffff; 
  27. 	background-color: rgb(32, 94, 127);
  28. border-right:0px solid #aaaaaa; 
  29. border-bottom:0px solid #aaaaaa;
  30. border-left:0px solid #aaaaaa;
  31. border-top:0px solid #aaaaaa; 
  32. border-top-left-radius:10px;
  33. border-bottom-left-radius:10px;
  34. border-top-right-radius:10px;
  35. border-bottom-right-radius:10px;
  36. }
  37. QPushButton:!checked{
  38. color: #ffffff; 
  39. background:#A0A6A9; 
  40. border-right:0px solid #aaaaaa; 
  41. border-bottom:0px solid #aaaaaa;
  42. border-left:0px solid #aaaaaa;
  43. border-top:0px solid #aaaaaa; 
  44. border-top-left-radius:10px;
  45. border-bottom-left-radius:10px;
  46. border-top-right-radius:10px;
  47. border-bottom-right-radius:10px;
  48. }
  49. QPushButton:!checked:hover{
  50. color: #ffffff; 
  51. background-color: rgb(140, 140, 140);
  52. border-right:0px solid #aaaaaa; 
  53. border-bottom:0px solid #aaaaaa;
  54. border-left:0px solid #aaaaaa;
  55. border-top:0px solid #aaaaaa; 
  56. border-top-left-radius:10px;
  57. border-bottom-left-radius:10px;
  58. border-top-right-radius:10px;
  59. border-bottom-right-radius:10px;
  60. }
  61. QPushButton:!checked:pressed{
  62. color: #ffffff; 
  63. background-color: rgb(100, 100, 100);
  64. border-right:0px solid #aaaaaa; 
  65. border-bottom:0px solid #aaaaaa;
  66. border-left:0px solid #aaaaaa;
  67. border-top:0px solid #aaaaaa; 
  68. border-top-left-radius:10px;
  69. border-bottom-left-radius:10px;
  70. border-top-right-radius:10px;
  71. border-bottom-right-radius:10px;
  72. }
  73.  
  74. QPushButton:!enabled{
  75. color: #ffffff; 
  76. background-color: rgb(200, 200, 200);
  77. border-right:0px solid #aaaaaa; 
  78. border-bottom:0px solid #aaaaaa;
  79. border-left:0px solid #aaaaaa;
  80. border-top:0px solid #aaaaaa; 
  81. border-top-left-radius:10px;
  82. border-bottom-left-radius:10px;
  83. border-top-right-radius:10px;
  84. border-bottom-right-radius:10px;
  85. }

不可选择按键：

 qss：

  1. QPushButton:enabled{
  2. color: #ffffff; 
  3. background-color: rgb(55, 156, 212);
  4. border-right:0px solid #aaaaaa; 
  5. border-bottom:0px solid #aaaaaa;
  6. border-left:0px solid #aaaaaa;
  7. border-top:0px solid #aaaaaa; 
  8. border-top-left-radius:10px;
  9. border-bottom-left-radius:10px;
  10. border-top-right-radius:10px;
  11. border-bottom-right-radius:10px;
  12. }
  13. QPushButton:enabled:hover{
  14. color: #ffffff; 
  15. background-color: rgb(43, 124, 168);
  16. border-right:0px solid #aaaaaa; 
  17. border-bottom:0px solid #aaaaaa;
  18. border-left:0px solid #aaaaaa;
  19. border-top:0px solid #aaaaaa; 
  20. border-top-left-radius:10px;
  21. border-bottom-left-radiu:10px;
  22. border-top-right-radius:10px;
  23. border-bottom-right-radius:10px;
  24. }
  25. QPushButton:enabled:pressed{
  26. color: #ffffff; 
  27. background-color: rgb(32, 94, 127);
  28. border-right:0px solid #aaaaaa; 
  29. border-bottom:0px solid #aaaaaa;
  30. border-left:0px solid #aaaaaa;
  31. border-top:0px solid #aaaaaa; 
  32. border-top-left-radius:10px;
  33. border-bottom-left-radius:10px;
  34. border-top-right-radius:10px;
  35. border-bottom-right-radius:10px;
  36. }
  37. QPushButton:!enabled{
  38. color: #ffffff; 
  39. background-color: rgb(200, 200, 200);
  40. border-right:0px solid #aaaaaa; 
  41. border-bottom:0px solid #aaaaaa;
  42. border-left:0px solid #aaaaaa;
  43. border-top:0px solid #aaaaaa; 
  44. border-top-left-radius:10px;
  45. border-bottom-left-radius:10px;
  46. border-top-right-radius:10px;
  47. border-bottom-right-radius:10px;
  48. }

风格2：

 不可选择按键

qss：

  1. QPushButton:enabled{
  2. color: #ffffff; 
  3. background-color: rgb(110, 110, 110);
  4. border-right:0px solid #aaaaaa; 
  5. border-bottom:0px solid #aaaaaa;
  6. border-left:0px solid #aaaaaa;
  7. border-top:0px solid #aaaaaa; 
  8. border-top-left-radius:10px;
  9. border-bottom-left-radius:10px;
  10. border-top-right-radius:10px;
  11. border-bottom-right-radius:10px;
  12. }
  13. QPushButton:enabled:hover{
  14. color: #ffffff; 
  15. background-color: rgb(100, 100, 100);
  16. border-right:0px solid #aaaaaa; 
  17. border-bottom:0px solid #aaaaaa;
  18. border-left:0px solid #aaaaaa;
  19. border-top:0px solid #aaaaaa; 
  20. border-top-left-radius:10px;
  21. border-bottom-left-radiu:10px;
  22. border-top-right-radius:10px;
  23. border-bottom-right-radius:10px;
  24. }
  25. QPushButton:enabled:pressed{
  26. color: #ffffff; 
  27. background-color: rgb(60, 60, 60);
  28. border-right:0px solid #aaaaaa; 
  29. border-bottom:0px solid #aaaaaa;
  30. border-left:0px solid #aaaaaa;
  31. border-top:0px solid #aaaaaa; 
  32. border-top-left-radius:10px;
  33. border-bottom-left-radius:10px;
  34. border-top-right-radius:10px;
  35. border-bottom-right-radius:10px;
  36. }
  37. QPushButton:!enabled{
  38. color: #ffffff; 
  39. background-color: rgb(200, 200, 200);
  40. border-right:0px solid #aaaaaa; 
  41. border-bottom:0px solid #aaaaaa;
  42. border-left:0px solid #aaaaaa;
  43. border-top:0px solid #aaaaaa; 
  44. border-top-left-radius:10px;
  45. border-bottom-left-radius:10px;
  46. border-top-right-radius:10px;
  47. border-bottom-right-radius:10px;
  48. }

风格3：

不可选择按键

 qss：

  1. QPushButton:enabled{
  2. color: #ffffff; 
  3. background-color: rgb(110, 170, 100);
  4. border-right:0px solid #aaaaaa; 
  5. border-bottom:0px solid #aaaaaa;
  6. border-left:0px solid #aaaaaa;
  7. border-top:0px solid #aaaaaa; 
  8. border-top-left-radius:10px;
  9. border-bottom-left-radius:10px;
  10. border-top-right-radius:10px;
  11. border-bottom-right-radius:10px;
  12. }
  13. QPushButton:enabled:hover{
  14. color: #ffffff; 
  15. background-color: rgb(96, 148, 87);
  16. border-right:0px solid #aaaaaa; 
  17. border-bottom:0px solid #aaaaaa;
  18. border-left:0px solid #aaaaaa;
  19. border-top:0px solid #aaaaaa; 
  20. border-top-left-radius:10px;
  21. border-bottom-left-radiu:10px;
  22. border-top-right-radius:10px;
  23. border-bottom-right-radius:10px;
  24. }
  25. QPushButton:enabled:pressed{
  26. color: #ffffff; 
  27. 	background-color: rgb(69, 106, 62);
  28. border-right:0px solid #aaaaaa; 
  29. border-bottom:0px solid #aaaaaa;
  30. border-left:0px solid #aaaaaa;
  31. border-top:0px solid #aaaaaa; 
  32. border-top-left-radius:10px;
  33. border-bottom-left-radius:10px;
  34. border-top-right-radius:10px;
  35. border-bottom-right-radius:10px;
  36. }
  37. QPushButton:!enabled{
  38. color: #ffffff; 
  39. background-color: rgb(200, 200, 200);
  40. border-right:0px solid #aaaaaa; 
  41. border-bottom:0px solid #aaaaaa;
  42. border-left:0px solid #aaaaaa;
  43. border-top:0px solid #aaaaaa; 
  44. border-top-left-radius:10px;
  45. border-bottom-left-radius:10px;
  46. border-top-right-radius:10px;
  47. border-bottom-right-radius:10px;
  48. }

可选择按键：

 qss：
 

  1. QPushButton:checked{
  2. color: #ffffff; 
  3. background-color: rgb(110, 170, 100);
  4. border-right:0px solid #aaaaaa; 
  5. border-bottom:0px solid #aaaaaa;
  6. border-left:0px solid #aaaaaa;
  7. border-top:0px solid #aaaaaa; 
  8. border-top-left-radius:10px;
  9. border-bottom-left-radius:10px;
  10. border-top-right-radius:10px;
  11. border-bottom-right-radius:10px;
  12. }
  13. QPushButton:checked:hover{
  14. color: #ffffff; 
  15. background-color: rgb(96, 148, 87);
  16. border-right:0px solid #aaaaaa; 
  17. border-bottom:0px solid #aaaaaa;
  18. border-left:0px solid #aaaaaa;
  19. border-top:0px solid #aaaaaa; 
  20. border-top-left-radius:10px;
  21. border-bottom-left-radiu:10px;
  22. border-top-right-radius:10px;
  23. border-bottom-right-radius:10px;
  24. }
  25. QPushButton:checked:pressed{
  26. color: #ffffff; 
  27. background-color: rgb(69, 106, 62);
  28. border-right:0px solid #aaaaaa; 
  29. border-bottom:0px solid #aaaaaa;
  30. border-left:0px solid #aaaaaa;
  31. border-top:0px solid #aaaaaa; 
  32. border-top-left-radius:10px;
  33. border-bottom-left-radius:10px;
  34. border-top-right-radius:10px;
  35. border-bottom-right-radius:10px;
  36. }
  37. QPushButton:!checked{
  38. color: #ffffff; 
  39. background:#A0A6A9; 
  40. border-right:0px solid #aaaaaa; 
  41. border-bottom:0px solid #aaaaaa;
  42. border-left:0px solid #aaaaaa;
  43. border-top:0px solid #aaaaaa; 
  44. border-top-left-radius:10px;
  45. border-bottom-left-radius:10px;
  46. border-top-right-radius:10px;
  47. border-bottom-right-radius:10px;
  48. }
  49. QPushButton:!checked:hover{
  50. color: #ffffff; 
  51. background-color: rgb(140, 140, 140);
  52. border-right:0px solid #aaaaaa; 
  53. border-bottom:0px solid #aaaaaa;
  54. border-left:0px solid #aaaaaa;
  55. border-top:0px solid #aaaaaa; 
  56. border-top-left-radius:10px;
  57. border-bottom-left-radius:10px;
  58. border-top-right-radius:10px;
  59. border-bottom-right-radius:10px;
  60. }
  61. QPushButton:!checked:pressed{
  62. color: #ffffff; 
  63. background-color: rgb(100, 100, 100);
  64. border-right:0px solid #aaaaaa; 
  65. border-bottom:0px solid #aaaaaa;
  66. border-left:0px solid #aaaaaa;
  67. border-top:0px solid #aaaaaa; 
  68. border-top-left-radius:10px;
  69. border-bottom-left-radius:10px;
  70. border-top-right-radius:10px;
  71. border-bottom-right-radius:10px;
  72. }
  73.  
  74. QPushButton:!enabled{
  75. color: #ffffff; 
  76. background-color: rgb(200, 200, 200);
  77. border-right:0px solid #aaaaaa; 
  78. border-bottom:0px solid #aaaaaa;
  79. border-left:0px solid #aaaaaa;
  80. border-top:0px solid #aaaaaa; 
  81. border-top-left-radius:10px;
  82. border-bottom-left-radius:10px;
  83. border-top-right-radius:10px;
  84. border-bottom-right-radius:10px;
  85. }

四、结语

积少成多

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/297304
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号