用CSS3来实现社交分享按钮


Posted in HTML / CSS onNovember 11, 2014

以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons

html代码如下

复制代码
代码如下:

<div>
<ul>
<li> <a href=" " title="My E-Mail"> <img src="images/gmail_white.png" /> <span>E-Mail</span> </a> </li>
<li> <a href="#" title="My LinkedIn Page"> <img src="images/linkedin_white.png" /> <span>LinkedIn</span> </a> </li>
<li> <a href="#" title="My Facebook Page"> <img src="images/facebook_white.png" /> <span>Facebook</span> </a> </li>
<li> <a href=“#" title="My Twitter Page"> <img src="images/twitter_white.png" /> <span>Twitter</span> </a> </li>
<li> <a href="#" title="My Flickr Page"> <img src="images/flickr_white.png" /> <span>Flickr</span> </a> </li>
</ul>
</div>

css代码如下

复制代码
代码如下:

* {
margin:0;
padding:0;
}
.outset-colored {
font-family:Helvetica, Verdana, Arial, sans-serif;
font-size: 14px;
list-style-type: none;
margin: 10px 0 0 10px;
}
.outset-colored ul {
list-style-type:none;
display:block;
}
.outset-colored li {
float:left;
height:30px;
margin:0 8px 7px 0;
}
.outset-colored li a {
color:#424242;
float:left;
font-size:16px;
font-weight:bold;
height:24px;
padding-left: 27px;
padding-top: 6px;
position: relative;
text-decoration: none;
border: 1px solid #bfc1c6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-borer-radius: 5px;
border-radius:5px;
}
.outset-colored li a img {
height:16px;
left:7px;
margin-right:7px;
position:absolute;
top:7px;
width:16px;
border:none;
}
.outset-colored li a span {
display: block;
height: 22px;
padding-right: 7px;
overflow: hidden;/*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}
span.site {
font-size: 14px;
line-height: 20px;
}
.outset-colored li a.email {
background:-moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff6666), color-stop(.10, #cc0000), color-stop(1, #c40202));
color: #f3f3f3;
border: 1px solid #c40202;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff6666', endColorstr='#c40202'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff6666', endColorstr='#c40202')"; /* IE8 */
}
.outset-colored li a:hover.email {
background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c40202), color-stop(.01, #cc0000), color-stop(.10, #e03434), color-stop(1, #e03434));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#c40202', endColorstr='#e03434'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#c40202', endColorstr='#e03434')"; /* IE8 */
}
.outset-colored li a.linkedin {
background:-moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #7cd0fb), color-stop(.10, #38a5dc), color-stop(1, #2c83ae));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7cd0fb', endColorstr='#2c83ae'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7cd0fb', endColorstr='#2c83ae')"; /* IE8 */
color: #f3f3f3;
border: 1px solid #2c83ae;
}
.outset-colored li a:hover.linkedin {
background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2c83ae), color-stop(.01, #38a5dc), color-stop(.10, #41b9f6), color-stop(1, #41b9f6));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2c83ae', endColorstr='#41b9f6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2c83ae', endColorstr='#41b9f6')"; /* IE8 */
}
.outset-colored li a.facebook {
background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7aa3f7), color-stop(.10, #4c72c3), color-stop(1, #3b5998));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7aa3f7', endColorstr='#3b5998'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7aa3f7', endColorstr='#3b5998')"; /* IE8 */
color: #f3f3f3;
border: 1px solid #3b5998;
}
.outset-colored li a:hover.facebook {
background:-moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3b5998), color-stop(.01, #4c72c3), color-stop(.10, #5c8aea), color-stop(1, #5c8aea));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#3b5998', endColorstr='#5c8aea'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3b5998', endColorstr='#5c8aea')"; /* IE8 */
}
.outset-colored li a.twitter {
background:-moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #8ae0fd), color-stop(.10, #24bce6), color-stop(1, #1e9ec1));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#8ae0fd', endColorstr='#1e9ec1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8ae0fd', endColorstr='#1e9ec1')"; /* IE8 */
color: #f3f3f3;
border: 1px solid #1e9ec1;
}
.outset-colored li a:hover.twitter {
background:-moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #24bce6), color-stop(.01, #33ccff), color-stop(.10, #33ccff), color-stop(1, #33ccff));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1e9ec1', endColorstr='#33ccff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1e9ec1', endColorstr='#33ccff')"; /* IE8 */
}
.outset-colored li a.flickr {
background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc75ba), color-stop(.10, #e10374), color-stop(1, #c10263));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fc75ba', endColorstr='#c10263'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fc75ba', endColorstr='#c10263')"; /* IE8 */
color: #f3f3f3;
border: 1px solid #c10263;
}
.outset-colored li a:hover.flickr {
background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c10263), color-stop(.01, #e10374), color-stop(.10, #ff0283), color-stop(1, #ff0283));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fc75ba', endColorstr='#ff0283'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fc75ba', endColorstr='#ff0283')"; /* IE8 */}

在firefox和chrome中预览如下:

用CSS3来实现社交分享按钮

在ie9中预览效果:

用CSS3来实现社交分享按钮

在ie6/7/8中预览效果如下:

用CSS3来实现社交分享按钮

HTML / CSS 相关文章推荐
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 #HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 #HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 #HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 #HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 #HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 #HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 #HTML / CSS
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JavaScript使用cookie
2007/02/02 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python使用smtplib模块发送邮件
2020/12/17 Python
python压包的概念及实例详解
2021/02/17 Python
会计大学生职业生涯规划书范文
2014/01/13 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电