94设计素材网模块标题 – B2主题WordPress美化

94设计素材网的模块标题简洁大气,表意明确,鲜明的颜色区分让一个个的按钮生动灵活。除了模块标题,我还顺手把hover动效写了下来,各位站长可根据自己的需要进行选择。

如何使用?

将以下代码添加至主题根目录下的style.css文件底部即可

  1. /*仿94设计模块标题开始*/
  2. /*标题*/
  3. .post-modules-top {
  4. padding: 0 15px 20px 15px;
  5. border-bottom: 0px solid #f3f3f3;
  6. white-space: nowrap;
  7. flex-direction: row;
  8. }
  9. .post-modules-top .modules-title-box {
  10. padding: 8px 0;
  11. display: block;
  12. }
  13. .post-list .module-title {
  14. position: relative;
  15. text-align: left;
  16. font-weight: 600 !important;
  17. font-size: 28px;
  18. }
  19. .post-list-cats {
  20. padding: 10px 16px 10px 30px;
  21. border-left: none;
  22. border-radius: 6px;
  23. background: none;
  24. width: calc(100% + 2px);
  25. margin-left: -2px;
  26. overflow: hidden;
  27. }
  28. /*模块按钮*/
  29. .picked.post-load-button span {
  30. border-radius: 4px;
  31. background: #504BCC;
  32. color: #fff;
  33. padding: 10px 14px;
  34. }
  35. .post-list-cats a span:hover {
  36. background: #504BCC;
  37. color: #fff !important;
  38. border-radius: 2px;
  39. }
  40. /*按钮背景颜色*/
  41. .post-list-cats a::before {
  42. background: #f6f7f8;
  43. }
  44. /*去除分割线条*/
  45. .b2_gap > li {
  46. border-bottom: none;
  47. border-right: none;
  48. }
  49. /*加载更多按钮*/
  50. .post-list .load-more button {
  51. padding: 11px 40px;
  52. width: auto;
  53. border: 1px solid #eee;
  54. background: linear-gradient(90deg,#504BCC,#7161ff);
  55. color: #fff;
  56. font-size: 14px;
  57. margin-top: 60px;
  58. border-radius: 5px;
  59. }
  60. .post-list .load-more button:hover {
  61. background: #504BCC;
  62. color: #fff;
  63. }
  64. /*hover动效*/
  65. .item-in {
  66. position: relative;
  67. /*margin: 0;*/
  68. border: 1px solid #f0f0f0;
  69. box-shadow: 0 0 10px rgba(0,0,0,.05);
  70. transition: all .2s;
  71. }
  72. .item-in:hover {
  73. -webkit-box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  74. box-shadow: 0 3px 6px -4px rgba(62, 94, 255, 0.050980392156862744), 0 6px 16px 0 rgba(62, 94, 255, 0.050980392156862744), 0 9px 28px 8px rgba(62, 94, 255, 0.050980392156862744);
  75. transform: translateY(-3px);
  76. }
  77. /*动效下标题调整*/
  78. .post-info {
  79. padding: 1pc 8px;
  80. background: #fff;
  81. }
  82. /*仿94设计模块标题结束*/
本站资源内容均来源互联网搜集,如发现违规内容或者侵犯之处,请联系我们进行协商处理,我们将第一时间进行删除。
绅士素材网 » 94设计素材网模块标题 – B2主题WordPress美化

发表评论

提供最优质的资源集合

立即查看 了解详情