HTML & CSS » [CSS]响应式社会化分享按钮

[CSS]响应式社会化分享按钮

发表于: HTML & CSS. 评论 (2)
Sponsor

目前很多网站都使用了社会化分享按钮,即使是一个简单的专题页都会使用上,所以这里分享大家一个响应式社会化分享按钮(RRSSB)代码,即使用在手机端也得到很好的显示效果。

responsive-social-share-buttons

RRSSB使用SASS编写,所以你可以很方便的改里面的样式。下面是使用方法:

使用教程

STEP1: 嵌入样式表和JS文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/rrssb.min.js"></script>
<link rel="stylesheet" href="css/rrssb.css" />

STEP2: 分享按钮使用无序列表<ul>编写,然后加上.rrssb-buttons样式

 <ul class="rrssb-buttons clearfix">
    <li class="email"> ... </li>
    <li class="facebook"> ... </li>
    ...
    <li class="googleplus"> ...</li>
 </ul>

兼容性

  • 测试分辨率在140px – 15465px
  • IE9+
  • 其它流行的浏览器(Firefox, Chrome, Safari, Opera等…)
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论2 Responses to “[CSS]响应式社会化分享按钮”

  1. 唐哲浩 - 回复

    它有几个按钮形式啊?就那么几个么?

  2. 服装品牌策划 - 回复

    这个效果很不错,有空拿去使用看看


{ 发表评论 }