美化begin主题分享按钮

  • A+
所属分类：互联网
本文预计阅读时间 18 分钟

逛其他网站的时候，发现这篇文字美化了知更鸟begin主题的这个喜欢分享按钮，个人感觉还不错，于是便收集来了。效果图如下

美化begin主题分享按钮

在主题css里面找到以下代码，我们需要把这段代码替换掉

  1. #social {
  2.     position: relative;
  3.     margin: 50px auto;
  4. }
  5. .social-main {
  6.     position: relative;
  7.     margin: 0 auto;
  8.     width: 243px;
  9. }
  10. .social-main span {
  11.     float: left;
  12. }
  13. .social-main a {
  14.     color: #999;
  15.     line-height: 36px;
  16.     border-radius: 2px;
  17. }
  18. .share-s a, .shang-s a {
  19.     text-align: center;
  20. }
  21. .like a {
  22.     float: left;
  23.     padding-left: 15px;
  24. }
  25. .social-main a:hover {
  26.     background: #f1f1f1;
  27.     color: #444;
  28.     transition: all 0.2s ease-in 0s;
  29. }
  30. .like a {
  31.     background: #fff;
  32.     width: 120px;
  33.     display: block;
  34.     border: 1px solid #ddd;
  35. }
  36. .share-s a {
  37.     background: #fff;
  38.     width: 120px;
  39.     display: block;
  40.     padding-left: 15px;
  41.     border: 1px solid #ddd;
  42. }
  43. .social-main i {
  44.     color: #999;
  45.     margin: 0 5px 0 0;
  46. }
  48. .shang-empty {
  49.     position: absolute;
  50.     left: 90px;
  51.     top: 0px;
  52.     width: 62px;
  53.     height: 38px;
  54.     overflow: hidden;
  55. }
  56. .shang-empty span {
  57.     background: #fff;
  58.     width: 60px;
  59.     height: 60px;
  60.     display: block;
  61.     margin: -10px 0 0 0;
  62.     border-radius: 60px;
  63.     border: 1px solid #ddd;
  64. }
  65. .shang-p a {
  66.     position: absolute;
  67.     background: #fff;
  68.     left: 96px;
  69.     top: -5px;
  70.     width: 48px;
  71.     height: 48px;
  72.     font-size: 16px;
  73.     line-height: 45px;
  74.     display: block;
  75.     border: 1px solid #ddd;
  76.     border-radius: 40px;
  77.     left: 101px\9;
  78.     top: 0\9;
  79.     width: 38px\9;
  80.     height: 38px\9;
  81.     line-height: 35px\9;
  82. }
  83. .shang-s {
  84.     height: 37px;
  85. }
  86. #shang {
  87.     width: 280px;
  88.     display: block;
  89. }
  90. .shang-img {
  91.     float: left;
  92. }
  93. .shang-img img {
  94.     width: 140px;
  95.     height: auto;
  96. }
  97. .shang-main h4 {
  98.     font-size: 15px;
  99.     font-size: 1.5rem;
  100.     text-align: center;
  101.     margin-bottom: 10px;
  102. }
  103. .shang-main i {
  104.     color: #ff0000;
  105. }
  107. #share {
  108.     position: absolute;
  109.     top: -60px;
  110.     rightright: -29px;
  111.     width: 302px;
  112.     height: 68px;
  113.     display: none;
  114.     z-index: 999;
  115. }
  116. #share a {
  117.     float: left;
  118.     background: #999;
  119.     font-size: 20px !important;
  120.     color: #fff;
  121.     width: 40px;
  122.     height: 40px;
  123.     line-height: 40px;
  124.     margin-left: 4px;
  125.     padding-left: 0;
  126.     text-align: center;
  127.     border-radius: 3px;
  128.     background: rgba(128, 128, 128, 0.9);
  129. }
  130. #share .be-addbox:hover {
  131.     background: #7ab951 !important;
  132. }
  133. #share .be-qzone:hover {
  134.     background: #ff7400 !important;
  135. }
  136. #share .be-stsina:hover {
  137.     background: #ff0000 !important;
  138. }
  139. #share .be-tqq:hover {
  140.     background: #46c0e6 !important;
  141. }
  142. #share .be-renren:hover {
  143.     background: #3b68ac !important;
  144. }
  145. #share .be-weixin:hover {
  146.     background: #006f1d !important;
  147. }
  148. .bd_weixin_popup {
  149.     height: 250px !important;
  150. }
  151. .bd_weixin_popup_foot {
  152.     display: none;
  153. }

将其替换成以下代码即可。

  1. #social {
  2.     position: relative;
  3.     margin: 50px auto;
  4. }
  5. .social-main {
  6.     position: relative;
  7.     margin: 0 auto;
  8.     width: 243px;
  9. }
  10. .social-main span {
  11.     float: left;
  12. }
  13. .social-main a {
  14.     color: #fff;
  15.     line-height: 36px;
  16.     border-radius: 40px;
  17. }
  18. .share-s a, .shang-s a {
  19.     text-align: center;
  20. }
  21. .like a {
  22.     float: left;
  23.     padding-left: 15px;
  24. }
  25. .social-main a:hover {
  26.     background: #696969;
  27.     color: #fff;
  28.     transition: all 0.2s ease-in 0s;
  29. }
  30. .like a {
  31.     background: #FF0000;
  32.     width: 120px;
  33.     display: block;
  34.     border: 1px solid #ddd;
  35. }
  36. .share-s a {
  37.     background: #0000FF;
  38.     width: 120px;
  39.     display: block;
  40.     padding-left: 15px;
  41.     border: 1px solid #ddd;
  42. }
  43. .social-main i {
  44.     color: #fff;
  45.     margin: 0 5px 0 0;
  46. }
  48. .shang-empty {
  49.     position: absolute;
  50.     left: 90px;
  51.     top: 0px;
  52.     width: 62px;
  53.     height: 38px;
  54.     overflow: hidden;
  55. }
  56. .shang-empty span {
  57.     background: #fff;
  58.     width: 60px;
  59.     height: 60px;
  60.     display: block;
  61.     margin: -10px 0 0 0;
  62.     border-radius: 60px;
  63.     border: 1px solid #ddd;
  64. }
  65. .shang-p a {
  66.     position: absolute;
  67.     background: #ffab2e;
  68.     left: 96px;
  69.     top: -5px;
  70.     width: 48px;
  71.     height: 48px;
  72.     font-size: 16px;
  73.     line-height: 45px;
  74.     display: block;
  75.     border: 1px solid #ddd;
  76.     border-radius: 40px;
  77.     left: 101px\9;
  78.     top: 0\9;
  79.     width: 38px\9;
  80.     height: 38px\9;
  81.     line-height: 35px\9;
  82. }
  83. .shang-s {
  84.     height: 37px;
  85. }
  86. #shang {
  87.     width: 280px;
  88.     display: block;
  89. }
  90. .shang-img {
  91.     float: left;
  92. }
  93. .shang-img img {
  94.     width: 140px;
  95.     height: auto;
  96. }
  97. .shang-main h4 {
  98.     font-size: 15px;
  99.     font-size: 1.5rem;
  100.     text-align: center;
  101.     margin-bottom: 10px;
  102. }
  103. .shang-main i {
  104.     color: #ff0000;
  105. }
  107. #share {
  108.     position: absolute;
  109.     top: -60px;
  110.     rightright: -29px;
  111.     width: 302px;
  112.     height: 68px;
  113.     display: none;
  114.     z-index: 999;
  115. }
  116. #share a {
  117.     float: left;
  118.     background: #999;
  119.     font-size: 20px
  120.     color: #fff;
  121.     width: 40px;
  122.     height: 40px;
  123.     line-height: 40px;
  124.     margin-left: 4px;
  125.     padding-left: 0;
  126.     text-align: center;
  127.     border-radius: 20px;
  128.     background: rgba(128, 128, 128, 0.9);
  129. }
  130. #share .be-addbox {
  131.     color: #7ab951;
  132.     border: 1px solid #7ab951;
  133.     background: #fff;
  134. }
  135. #share .be-addbox:hover {
  136.     background: #7ab951 !important;
  137.     color: #fff !important;
  138. }
  139. #share .be-qzone {
  140.     color: #ff7400;
  141.     border: 1px solid #ff7400;
  142.     background: #fff;
  143. }
  144. #share .be-qzone:hover {
  145.     background: #ff7400 !important;
  146.     color: #fff !important;
  147. }
  148. #share .be-stsina {
  149.     color: red;
  150.     border: 1px solid red;
  151.     background: #fff;
  152. }
  153. #share .be-stsina:hover {
  154.     background: #ff0000 !important;
  155.     color: #fff !important;
  156. }
  157. #share .be-tqq {
  158.     color: #46c0e6;
  159.     border: 1px solid #46c0e6;
  160.     background: #fff;
  161. }
  162. #share .be-tqq:hover {
  163.     background: #46c0e6 !important;
  164.     color: #fff !important;
  165. }
  166. #share .be-renren {
  167.     color: #3b68ac;
  168.     border: 1px solid #3b68ac;
  169.     background: #fff;
  170. }
  171. #share .be-renren:hover {
  172.     background: #3b68ac !important;
  173.     color: #fff !important;
  174. }
  175. #share .be-weixin {
  176.     color: #006f1d;
  177.     border: 1px solid #006f1d;
  178.     background: #fff;
  179. }
  180. #share .be-weixin:hover {
  181.     background: #00ff43 !important;
  182.     color: #fff !important;
  183. }
  184. .bd_weixin_popup {
  185.     height: 250px !important;
  186. }
  187. .bd_weixin_popup_foot {
  188.     display: none;
  189. }

以上就是美化喜欢分享按钮的代码。

诗风