推荐一个极简社会化分享插件basicShare

image.png


文章目录



basicShare

推荐一款极简的分享插件

之前用过百度分享,后来博客切换https服务后,
百度分享插件加载报错,
再加上目前主流的社会化分享目的地也就是 微信,微博,
或许是80后的我真的out了,
这个插件基本满足我的需要


极致简洁

UI效果
image.png

截图展示效果有点大....
看看实际效果:

站点没有下载icon,所以前面的分享icon变成了方框□

css

.basicShareBtn {
cursor: pointer;
background-color: #dff0d8;
border-color: #d6e9c6;
color: green;
font-size: 1.15em;
border-radius: 50px;
text-shadow: none;
 font-weight: normal;
 display: inline-block;
 text-decoration: none;
 vertical-align: middle;
 box-sizing: border-box;
 outline: 0;
 border: 1px solid transparent;
 -webkit-appearance: none;
 transition-duration: .3s;
 transition-timing-function: ease-out;
 transition-property: all;
 padding-left: 1em;
 padding-right: 1em;
 height: 2.4em;
 line-height: 2.4em;
 font: inherit;
 margin: 0;
 text-rendering: auto;
 letter-spacing: normal;
 word-spacing: normal;
 text-transform: none;
 text-indent: 0px;
}

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0,0);
}

.fa-share-alt:before {
content: "\f1e0";
}

html

<button class="basicShareBtn"><span class="fa fa-share-alt"></span>分享</button>

js

页面直接引用下面js脚本

<script src='https://publib-intl.qinco.net/basicShare/0.4.min.js'></script>

**注意:引用脚本之前需要引用jquery **

出自:推荐一个极简社会化分享插件basicShare

回到顶部