为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下： 实现的代码。 html代码：
XML/HTML Code复制内容到剪贴板 <div class=\ <div class=\
<div class=\
<div class=\ share on twitter </div> </div>
<div class=\
<i class=\ </div> </div>
<div class=\
<div class=\
<div class=\ share on facebook </div> </div>
<div class=\
<i class=\ </div> </div>
<div class=\
<div class=\
<div class=\ pin on pinterest </div> </div>
<div class=\
<i class=\ </div> </div>
<div class=\
<div class=\
<div class=\ share on tumblr </div> </div>
<div class=\
<i class=\ </div> </div>
<div class=\
<div class=\
<div class=\ share on google+ </div> </div>
<div class=\
<i class=\ </div> </div> </div> css3代码：
CSS Code复制内容到剪贴板 body {
background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%); background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%); padding: 2em; text-align: center; } * {
-moz-box-sizing: border-box; box-sizing: border-box; }
.share-buttons {
position: absolute; width: 300px; height: 212px;
padding-left: 135px; top: 50%; left: 50%;
margin-left: -150px; margin-top: -106px; }
.share-buttons .share-button {
float: left;
margin-top: 15px; }
.share-buttons .share-button:first-child {
margin-top: 0; }
.share-buttons .share-button:after {
clear: both; display: table; }
.share-button {
display: block; position: relative; height: 30px; }
.share-button:hover {
cursor: pointer; }
.share-button:hover .share-button-primary {
box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1); }
.share-button:hover .share-button-secondary-content {
-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.share-button-primary {
position: absolute; background: #fff; width: 30px; height: 30px;
border-radius: 15px; left: 0; top: 50%;
margin-top: -15px; }