- A+
所属分类:互联网
逛其他网站的时候,发现这篇文字美化了知更鸟begin主题的这个喜欢分享按钮,个人感觉还不错,于是便收集来了。效果图如下
在主题css里面找到以下代码,我们需要把这段代码替换掉
- #social {
- position: relative;
- margin: 50px auto;
- }
- .social-main {
- position: relative;
- margin: 0 auto;
- width: 243px;
- }
- .social-main span {
- float: left;
- }
- .social-main a {
- color: #999;
- line-height: 36px;
- border-radius: 2px;
- }
- .share-s a, .shang-s a {
- text-align: center;
- }
- .like a {
- float: left;
- padding-left: 15px;
- }
- .social-main a:hover {
- background: #f1f1f1;
- color: #444;
- transition: all 0.2s ease-in 0s;
- }
- .like a {
- background: #fff;
- width: 120px;
- display: block;
- border: 1px solid #ddd;
- }
- .share-s a {
- background: #fff;
- width: 120px;
- display: block;
- padding-left: 15px;
- border: 1px solid #ddd;
- }
- .social-main i {
- color: #999;
- margin: 0 5px 0 0;
- }
- .shang-empty {
- position: absolute;
- left: 90px;
- top: 0px;
- width: 62px;
- height: 38px;
- overflow: hidden;
- }
- .shang-empty span {
- background: #fff;
- width: 60px;
- height: 60px;
- display: block;
- margin: -10px 0 0 0;
- border-radius: 60px;
- border: 1px solid #ddd;
- }
- .shang-p a {
- position: absolute;
- background: #fff;
- left: 96px;
- top: -5px;
- width: 48px;
- height: 48px;
- font-size: 16px;
- line-height: 45px;
- display: block;
- border: 1px solid #ddd;
- border-radius: 40px;
- left: 101px\9;
- top: 0\9;
- width: 38px\9;
- height: 38px\9;
- line-height: 35px\9;
- }
- .shang-s {
- height: 37px;
- }
- #shang {
- width: 280px;
- display: block;
- }
- .shang-img {
- float: left;
- }
- .shang-img img {
- width: 140px;
- height: auto;
- }
- .shang-main h4 {
- font-size: 15px;
- font-size: 1.5rem;
- text-align: center;
- margin-bottom: 10px;
- }
- .shang-main i {
- color: #ff0000;
- }
- #share {
- position: absolute;
- top: -60px;
- rightright: -29px;
- width: 302px;
- height: 68px;
- display: none;
- z-index: 999;
- }
- #share a {
- float: left;
- background: #999;
- font-size: 20px !important;
- color: #fff;
- width: 40px;
- height: 40px;
- line-height: 40px;
- margin-left: 4px;
- padding-left: 0;
- text-align: center;
- border-radius: 3px;
- background: rgba(128, 128, 128, 0.9);
- }
- #share .be-addbox:hover {
- background: #7ab951 !important;
- }
- #share .be-qzone:hover {
- background: #ff7400 !important;
- }
- #share .be-stsina:hover {
- background: #ff0000 !important;
- }
- #share .be-tqq:hover {
- background: #46c0e6 !important;
- }
- #share .be-renren:hover {
- background: #3b68ac !important;
- }
- #share .be-weixin:hover {
- background: #006f1d !important;
- }
- .bd_weixin_popup {
- height: 250px !important;
- }
- .bd_weixin_popup_foot {
- display: none;
- }
将其替换成以下代码即可。
- #social {
- position: relative;
- margin: 50px auto;
- }
- .social-main {
- position: relative;
- margin: 0 auto;
- width: 243px;
- }
- .social-main span {
- float: left;
- }
- .social-main a {
- color: #fff;
- line-height: 36px;
- border-radius: 40px;
- }
- .share-s a, .shang-s a {
- text-align: center;
- }
- .like a {
- float: left;
- padding-left: 15px;
- }
- .social-main a:hover {
- background: #696969;
- color: #fff;
- transition: all 0.2s ease-in 0s;
- }
- .like a {
- background: #FF0000;
- width: 120px;
- display: block;
- border: 1px solid #ddd;
- }
- .share-s a {
- background: #0000FF;
- width: 120px;
- display: block;
- padding-left: 15px;
- border: 1px solid #ddd;
- }
- .social-main i {
- color: #fff;
- margin: 0 5px 0 0;
- }
- .shang-empty {
- position: absolute;
- left: 90px;
- top: 0px;
- width: 62px;
- height: 38px;
- overflow: hidden;
- }
- .shang-empty span {
- background: #fff;
- width: 60px;
- height: 60px;
- display: block;
- margin: -10px 0 0 0;
- border-radius: 60px;
- border: 1px solid #ddd;
- }
- .shang-p a {
- position: absolute;
- background: #ffab2e;
- left: 96px;
- top: -5px;
- width: 48px;
- height: 48px;
- font-size: 16px;
- line-height: 45px;
- display: block;
- border: 1px solid #ddd;
- border-radius: 40px;
- left: 101px\9;
- top: 0\9;
- width: 38px\9;
- height: 38px\9;
- line-height: 35px\9;
- }
- .shang-s {
- height: 37px;
- }
- #shang {
- width: 280px;
- display: block;
- }
- .shang-img {
- float: left;
- }
- .shang-img img {
- width: 140px;
- height: auto;
- }
- .shang-main h4 {
- font-size: 15px;
- font-size: 1.5rem;
- text-align: center;
- margin-bottom: 10px;
- }
- .shang-main i {
- color: #ff0000;
- }
- #share {
- position: absolute;
- top: -60px;
- rightright: -29px;
- width: 302px;
- height: 68px;
- display: none;
- z-index: 999;
- }
- #share a {
- float: left;
- background: #999;
- font-size: 20px
- color: #fff;
- width: 40px;
- height: 40px;
- line-height: 40px;
- margin-left: 4px;
- padding-left: 0;
- text-align: center;
- border-radius: 20px;
- background: rgba(128, 128, 128, 0.9);
- }
- #share .be-addbox {
- color: #7ab951;
- border: 1px solid #7ab951;
- background: #fff;
- }
- #share .be-addbox:hover {
- background: #7ab951 !important;
- color: #fff !important;
- }
- #share .be-qzone {
- color: #ff7400;
- border: 1px solid #ff7400;
- background: #fff;
- }
- #share .be-qzone:hover {
- background: #ff7400 !important;
- color: #fff !important;
- }
- #share .be-stsina {
- color: red;
- border: 1px solid red;
- background: #fff;
- }
- #share .be-stsina:hover {
- background: #ff0000 !important;
- color: #fff !important;
- }
- #share .be-tqq {
- color: #46c0e6;
- border: 1px solid #46c0e6;
- background: #fff;
- }
- #share .be-tqq:hover {
- background: #46c0e6 !important;
- color: #fff !important;
- }
- #share .be-renren {
- color: #3b68ac;
- border: 1px solid #3b68ac;
- background: #fff;
- }
- #share .be-renren:hover {
- background: #3b68ac !important;
- color: #fff !important;
- }
- #share .be-weixin {
- color: #006f1d;
- border: 1px solid #006f1d;
- background: #fff;
- }
- #share .be-weixin:hover {
- background: #00ff43 !important;
- color: #fff !important;
- }
- .bd_weixin_popup {
- height: 250px !important;
- }
- .bd_weixin_popup_foot {
- display: none;
- }
以上就是美化喜欢分享按钮的代码。