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

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

1 src=”https://pic.imgdb.cn/item/5fccf5f6394ac5237898e747.png” alt=”” />

如何使用？

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

1. /*仿94设计模块标题开始*/
3. /*标题*/
4. .post-modules-top {
5. padding: 0 15px 20px 15px;
6. border-bottom: 0px solid #f3f3f3;
7. white-space: nowrap;
8. flex-direction: row;
9. }
11. .post-modules-top .modules-title-box {
12. padding: 8px 0;
13. display: block;
14. }
16. .post-list .module-title {
17. position: relative;
18. text-align: left;
19. font-weight: 600 !important;
20. font-size: 28px;
21. }
23. .post-list-cats {
24. padding: 10px 16px 10px 30px;
25. border-left: none;
26. border-radius: 6px;
27. background: none;
28. width: calc(100% + 2px);
29. margin-left: -2px;
30. overflow: hidden;
31. }
32. /*模块按钮*/
33. .picked.post-load-button span {
34. border-radius: 4px;
35. background: #504BCC;
36. color: #fff;
37. padding: 10px 14px;
38. }
40. .post-list-cats a span:hover {
41. background: #504BCC;
42. color: #fff !important;
43. border-radius: 2px;
44. }
45. /*按钮背景颜色*/
46. .post-list-cats a::before {
47. background: #f6f7f8;
48. }
49. /*去除分割线条*/
50. .b2_gap > li {
51. border-bottom: none;
52. border-right: none;
53. }
55. /*加载更多按钮*/
57. .post-list .load-more button {
58. padding: 11px 40px;
59. width: auto;
60. border: 1px solid #eee;
61. background: linear-gradient(90deg,#504BCC,#7161ff);
62. color: #fff;
63. font-size: 14px;
64. margin-top: 60px;
65. border-radius: 5px;
66. }
68. .post-list .load-more button:hover {
69. background: #504BCC;
70. color: #fff;
71. }
74. /*hover动效*/
75. .item-in {
76. position: relative;
77. /*margin: 0;*/
78. border: 1px solid #f0f0f0;
79. box-shadow: 0 0 10px rgba(0,0,0,.05);
80. transition: all .2s;
81. }
83. .item-in:hover {
84. -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);
85. 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);
86. transform: translateY(-3px);
87. }
89. /*动效下标题调整*/
90. .post-info {
91. padding: 1pc 8px;
92. background: #fff;
93. }
94. /*仿94设计模块标题结束*/

素材网普通

收藏 海报 链接