今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="black"> <ahref="#"class="btn"><span>BecomeAMember</span><i>→</i></a><ahref="#" class="btn"><span>SupportUs</span><i>→</i></a><ahref="#"class="btn"><span> GoingDown</span><iclass="down">→</i></a><ahref="#"class="btn"><span>Sign Up</span><iclass="up">→</i></a> </div> <divclass="white"> <ahref="#"class="btn"><span>BecomeAMember</span><i>→</i></a><ahref="#" class="btn"><span>SupportUs</span><i>→</i></a><ahref="#"class="btn"><span> GoingDown</span><iclass="down">→</i></a><ahref="#"class="btn"><span>Sign Up</span><iclass="up">→</i></a> </div>
css3代码：
CSS Code复制内容到剪贴板 body { } h1 { font-family:"AbrilTitling",Georgia,serif; color:#f9f9f9; letter-spacing:1px; } bodydiv { padding:60px0; text-align:center; height:80px; margin-top:0; } .black { background:#262D28; } .white { background:#f9f9f9; } a { display:inline-block; margin:10px; } .btn { position:relative; width:160px; padding:1.2rem3rem; border:1pxsolid#0AA944; font-size:15px; text-decoration:none; color:#f9f9f9; font-family:"TabletGothic",sans-serif; text-transform:uppercase; font-weight:300; letter-spacing:1.5px; -webkit-transition:all.2sease-out; -moz-transition:all.2sease-out; -ms-transition:all.2sease-out; -o-transition:all.2sease-out; transition:all.2sease-out; } .white.btn { color:#262D28; border:2pxsolid#0AA944; } .btnspan { position:relative; top:2px; left:0; -webkit-transition:all.3sease-out; -moz-transition:all.3sease-out; -ms-transition:all.3sease-out; -o-transition:all.3sease-out; transition:all.3sease-out; } .btni { opacity:0; position:absolute; margin-top:-21px; top:2.5rem; left:120%; -webkit-transition:all.3sease-out; -moz-transition:all.3sease-out; -ms-transition:all.3sease-out; -o-transition:all.3sease-out; transition:all.3sease-out; } .btn:hover { background:rgba(255,255,255,.9); border:1pxsolidrgba(0,0,0,1); } .white.btn:hover { background:rgba(0,0,0,.02); border:2pxsolidrgba(0,0,0,1); } .btn:hoverspan { color:#333; left:-20px; } a.btn:hoveri { opacity:1; left:80%; color:#333; -webkit-transform:scale(1.2); } a.btn:hover.up { -webkit-transform:rotate(270deg); } a.btn:hover.down { -webkit-transform:rotate(90deg); }
以上就是今天给大家分享一款纯css3实现的动画按钮的全部代码，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。
【纯css3实现的动画按钮的实例教程】相关文章：