以下是 CSS3小图标分享按钮代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3小图标分享按钮</title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css'>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="slide clearfix">
<h2>Btn slide</h2>
<a href="#" class="btn facebook">
<i class="icons fi-social-facebook"></i>
<span class="text">Facebook</span>
</a>
<a href="#" class="btn">
<span class="icons fi-social-github"></span>
<span class="text dd ">Github</span>
</a>
<a href="#" class="btn behance">
<i class="icons fi-social-behance"></i>
<span class="text">Behance</span>
</a>
<a href="#" class="btn skype">
<span class="icons fi-social-skype"></span>
<span class="text dd ">Skype</span>
</a>
<a href="#" class="btn twitter">
<i class="icons fi-social-twitter"></i>
<span class="text">Twitter</span>
</a>
<a href="#" class="btn pinterest">
<span class="icons fi-social-pinterest"></span>
<span class="text dd ">Pinterest</span>
</a>
<a href="#" class="btn gplus">
<i class="icons fi-social-google-plus"></i>
<span class="text">Google +</span>
</a>
<a href="#" class="btn dribble">
<span class="icons fi-social-dribbble"></span>
<span class="text dd ">Dribble</span>
</a>
</div>
<div class="opacity clearfix">
<h2>Btn Opacity</h2>
<a href="#" class="btn facebook">
<i class="icons fi-social-facebook"></i>
<span class="text">Facebook</span>
</a>
<a href="#" class="btn">
<span class="icons fi-social-github"></span>
<span class="text dd ">Github</span>
</a>
<a href="#" class="btn behance">
<i class="icons fi-social-behance"></i>
<span class="text">Behance</span>
</a>
<a href="#" class="btn skype">
<span class="icons fi-social-skype"></span>
<span class="text dd ">Skype</span>
</a>
<a href="#" class="btn twitter">
<i class="icons fi-social-twitter"></i>
<span class="text">Twitter</span>
</a>
<a href="#" class="btn pinterest">
<span class="icons fi-social-pinterest"></span>
<span class="text dd ">Pinterest</span>
</a>
<a href="#" class="btn gplus">
<i class="icons fi-social-google-plus"></i>
<span class="text">Google +</span>
</a>
<a href="#" class="btn dribble">
<span class="icons fi-social-dribbble"></span>
<span class="text dd ">Dribble</span>
</a>
</div>
</div>
</body>
</html>
CSS代码(style.css):
.clearfix:after{content:"";clear:both;display:table;}
body{background:#222;color:#fff;}
.wrap{width:75%;margin:0 auto;font-family:"Helvetica Neue",Helvetica,sans-serif;}
.wrap h2{color:#fff;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #111;}
.btn{display:block;float:left;width:100px;height:40px;background-color:#999;text-align:center;line-height:40px;position:relative;text-decoration:none;margin:10px;overflow:hidden;}
/* Social media colors */
.facebook{background:#3B5998;}
.twitter{background:#00aced;}
.gplus{background:#dd4b39;}
.pinterest{background:#cb2027;}
.dribble{background:#ea4c89;}
.skype{background:#12A5F4;}
.behance{background:#005DFF;}
.icons{display:block;position:absolute;width:100%;left:0;opacity:1;color:#fff;font-size:24px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.text{color:#fff;font-size:11px;position:absolute;right:-100px;top:0;opacity:0;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.btn:hover .icons{left:-100px;opacity:0;}
.btn:hover .text{right:25%;opacity:1;}
.opacity .btn:hover{opacity:1}
.opacity .btn:hover .icons{opacity:0;left:0;}
.opacity .btn .text{top:-25%;display:block;right:25% !important;opacity:0;}
.opacity .btn:hover .text{top:0;opacity:1;}
分享到QQ
分享到微博
微信扫一扫
