查字典教程网之前为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板 <divclass="share-buttons"> <divclass="share-button"> <divclass="share-button-secondary"> <divclass="share-button-secondary-content"> shareontwitter </div> </div> <divclass="share-button-primary"> <iclass="share-button-iconfafa-twitter"></i> </div> </div> <divclass="share-button"> <divclass="share-button-secondary"> <divclass="share-button-secondary-content"> shareonfacebook </div> </div> <divclass="share-button-primary"> <iclass="share-button-iconfafa-facebook"></i> </div> </div> <divclass="share-button"> <divclass="share-button-secondary"> <divclass="share-button-secondary-content"> pinonpinterest </div> </div> <divclass="share-button-primary"> <iclass="share-button-iconfafa-pinterest"></i> </div> </div> <divclass="share-button"> <divclass="share-button-secondary"> <divclass="share-button-secondary-content"> shareontumblr </div> </div> <divclass="share-button-primary"> <iclass="share-button-iconfafa-tumblr"></i> </div> </div> <divclass="share-button"> <divclass="share-button-secondary"> <divclass="share-button-secondary-content"> shareongoogle+ </div> </div> <divclass="share-button-primary"> <iclass="share-button-iconfafa-google-plus"></i> </div> </div> </div>

css3代码：

CSS Code复制内容到剪贴板 body { background:-webkit-linear-gradient(0deg,#FF800810%,#FFC83790%); background:linear-gradient(90deg,#FF800810%,#FFC83790%); 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:1px000rgba(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; } .share-button-icon { display:block; color:#242424; position:absolute; width:30px; line-height:30px; font-size:16px; margin-top:1px; } .share-button-secondary { overflow:hidden; margin-left:15px; height:30px; } .share-button-secondary-content { font-family:sans-serif; font-size:.75em; background:#fff; display:block; height:30px; text-align:left; padding-left:24px; padding-right:18px; line-height:30px; color:#242424; border-radius:015px15px0; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); -webkit-transition:-webkit-transform175msease; transition:transform175msease; }