美化begin主题分享按钮

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

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

美化begin主题分享按钮

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

  1. #social {
  2.     positionrelative;
  3.     margin50px auto;
  4. }
  5. .social-main {
  6.     positionrelative;
  7.     margin: 0 auto;
  8.     width243px;
  9. }
  10. .social-main span {
  11.     floatleft;
  12. }
  13. .social-main a {
  14.     color#999;
  15.     line-height36px;
  16.     border-radius: 2px;
  17. }
  18. .share-s a, .shang-s a {
  19.     text-aligncenter;
  20. }
  21. .like a {
  22.     floatleft;
  23.     padding-left15px;
  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.     width120px;
  33.     displayblock;
  34.     border1px solid #ddd;
  35. }
  36. .share-s a {
  37.     background#fff;
  38.     width120px;
  39.     displayblock;
  40.     padding-left15px;
  41.     border1px solid #ddd;
  42. }
  43. .social-main i {
  44.     color#999;
  45.     margin: 0 5px 0 0;
  46. }
  47. .shang-empty {
  48.     positionabsolute;
  49.     left90px;
  50.     top0px;
  51.     width62px;
  52.     height38px;
  53.     overflowhidden;
  54. }
  55. .shang-empty span {
  56.     background#fff;
  57.     width60px;
  58.     height60px;
  59.     displayblock;
  60.     margin: -10px 0 0 0;
  61.     border-radius: 60px;
  62.     border1px solid #ddd;
  63. }
  64. .shang-p a {
  65.     positionabsolute;
  66.     background#fff;
  67.     left96px;
  68.     top: -5px;
  69.     width48px;
  70.     height48px;
  71.     font-size16px;
  72.     line-height45px;
  73.     displayblock;
  74.     border1px solid #ddd;
  75.     border-radius: 40px;
  76.     left101px\9;
  77.     top: 0\9;
  78.     width38px\9;
  79.     height38px\9;
  80.     line-height35px\9;
  81. }
  82. .shang-s {
  83.     height37px;
  84. }
  85. #shang {
  86.     width280px;
  87.     displayblock;
  88. }
  89. .shang-img {
  90.     floatleft;
  91. }
  92. .shang-img img {
  93.     width140px;
  94.     heightauto;
  95. }
  96. .shang-main h4 {
  97.     font-size15px;
  98.     font-size: 1.5rem;
  99.     text-aligncenter;
  100.     margin-bottom10px;
  101. }
  102. .shang-main i {
  103.     color#ff0000;
  104. }
  105. #share {
  106.     positionabsolute;
  107.     top: -60px;
  108.     rightright: -29px;
  109.     width302px;
  110.     height68px;
  111.     displaynone;
  112.     z-index: 999;
  113. }
  114. #share a {
  115.     floatleft;
  116.     background#999;
  117.     font-size20px !important;
  118.     color#fff;
  119.     width40px;
  120.     height40px;
  121.     line-height40px;
  122.     margin-left4px;
  123.     padding-left: 0;
  124.     text-aligncenter;
  125.     border-radius: 3px;
  126.     background: rgba(128, 128, 128, 0.9);
  127. }
  128. #share .be-addbox:hover {
  129.     background#7ab951 !important;
  130. }
  131. #share .be-qzone:hover {
  132.     background#ff7400 !important;
  133. }
  134. #share .be-stsina:hover {
  135.     background#ff0000 !important;
  136. }
  137. #share .be-tqq:hover {
  138.     background#46c0e6 !important;
  139. }
  140. #share .be-renren:hover {
  141.     background#3b68ac !important;
  142. }
  143. #share .be-weixin:hover {
  144.     background#006f1d !important;
  145. }
  146. .bd_weixin_popup {
  147.     height250px !important;
  148. }
  149. .bd_weixin_popup_foot {
  150.     displaynone;
  151. }

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

  1. #social {
  2.     positionrelative;
  3.     margin50px auto;
  4. }
  5. .social-main {
  6.     positionrelative;
  7.     margin: 0 auto;
  8.     width243px;
  9. }
  10. .social-main span {
  11.     floatleft;
  12. }
  13. .social-main a {
  14.     color#fff;
  15.     line-height36px;
  16.     border-radius: 40px;
  17. }
  18. .share-s a, .shang-s a {
  19.     text-aligncenter;
  20. }
  21. .like a {
  22.     floatleft;
  23.     padding-left15px;
  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.     width120px;
  33.     displayblock;
  34.     border1px solid #ddd;
  35. }
  36. .share-s a {
  37.     background#0000FF;
  38.     width120px;
  39.     displayblock;
  40.     padding-left15px;
  41.     border1px solid #ddd;
  42. }
  43. .social-main i {
  44.     color#fff;
  45.     margin: 0 5px 0 0;
  46. }
  47. .shang-empty {
  48.     positionabsolute;
  49.     left90px;
  50.     top0px;
  51.     width62px;
  52.     height38px;
  53.     overflowhidden;
  54. }
  55. .shang-empty span {
  56.     background#fff;
  57.     width60px;
  58.     height60px;
  59.     displayblock;
  60.     margin: -10px 0 0 0;
  61.     border-radius: 60px;
  62.     border1px solid #ddd;
  63. }
  64. .shang-p a {
  65.     positionabsolute;
  66.     background#ffab2e;
  67.     left96px;
  68.     top: -5px;
  69.     width48px;
  70.     height48px;
  71.     font-size16px;
  72.     line-height45px;
  73.     displayblock;
  74.     border1px solid #ddd;
  75.     border-radius: 40px;
  76.     left101px\9;
  77.     top: 0\9;
  78.     width38px\9;
  79.     height38px\9;
  80.     line-height35px\9;
  81. }
  82. .shang-s {
  83.     height37px;
  84. }
  85. #shang {
  86.     width280px;
  87.     displayblock;
  88. }
  89. .shang-img {
  90.     floatleft;
  91. }
  92. .shang-img img {
  93.     width140px;
  94.     heightauto;
  95. }
  96. .shang-main h4 {
  97.     font-size15px;
  98.     font-size: 1.5rem;
  99.     text-aligncenter;
  100.     margin-bottom10px;
  101. }
  102. .shang-main i {
  103.     color#ff0000;
  104. }
  105. #share {
  106.     positionabsolute;
  107.     top: -60px;
  108.     rightright: -29px;
  109.     width302px;
  110.     height68px;
  111.     displaynone;
  112.     z-index: 999;
  113. }
  114. #share a {
  115.     floatleft;
  116.     background#999;
  117.     font-size20px
  118.     color#fff;
  119.     width40px;
  120.     height40px;
  121.     line-height40px;
  122.     margin-left4px;
  123.     padding-left: 0;
  124.     text-aligncenter;
  125.     border-radius: 20px;
  126.     background: rgba(128, 128, 128, 0.9);
  127. }
  128. #share .be-addbox {
  129.     color#7ab951;
  130.     border1px solid #7ab951;
  131.     background#fff;
  132. }
  133. #share .be-addbox:hover {
  134.     background#7ab951 !important;
  135.     color#fff !important;
  136. }
  137. #share .be-qzone {
  138.     color#ff7400;
  139.     border1px solid #ff7400;
  140.     background#fff;
  141. }
  142. #share .be-qzone:hover {
  143.     background#ff7400 !important;
  144.     color#fff !important;
  145. }
  146. #share .be-stsina {
  147.     colorred;
  148.     border1px solid red;
  149.     background#fff;
  150. }
  151. #share .be-stsina:hover {
  152.     background#ff0000 !important;
  153.     color#fff !important;
  154. }
  155. #share .be-tqq {
  156.     color#46c0e6;
  157.     border1px solid #46c0e6;
  158.     background#fff;
  159. }
  160. #share .be-tqq:hover {
  161.     background#46c0e6 !important;
  162.     color#fff !important;
  163. }
  164. #share .be-renren {
  165.     color#3b68ac;
  166.     border1px solid #3b68ac;
  167.     background#fff;
  168. }
  169. #share .be-renren:hover {
  170.     background#3b68ac !important;
  171.     color#fff !important;
  172. }
  173. #share .be-weixin {
  174.     color#006f1d;
  175.     border1px solid #006f1d;
  176.     background#fff;
  177. }
  178. #share .be-weixin:hover {
  179.     background#00ff43 !important;
  180.     color#fff !important;
  181. }
  182. .bd_weixin_popup {
  183.     height250px !important;
  184. }
  185. .bd_weixin_popup_foot {
  186.     displaynone;
  187. }

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

诗风