这篇文章主要讲解了“css3实现的动画按钮代码分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3实现的动画按钮代码分享”吧！
今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板
<div class="black">
<a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"
class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>
Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign
Up</span> <i class="up">→</i> </a>
</div>
<div class="white">
<a href="#" class="btn"><span>Become A Member</span> <i>→</i> </a><a href="#"
class="btn"><span>Support Us</span> <i>→</i> </a><a href="#" class="btn"><span>
Going Down</span> <i class="down">→</i> </a><a href="#" class="btn"><span>Sign
Up</span> <i class="up">→</i> </a>
</div>
css3代码：
CSS Code复制内容到剪贴板
body
{
}
h2
{
font-family: "Abril Titling" , Georgia, serif;
color: #f9f9f9;
letter-spacing: 1px;
}
body div
{
padding: 60px 0;
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.2rem 3rem;
border: 1px solid #0AA944;
font-size: 15px;
text-decoration: none;
color: #f9f9f9;
font-family: "Tablet Gothic" , sans-serif;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1.5px;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.white .btn
{
color: #262D28;
border: 2px solid #0AA944;
}
.btn span
{
position: relative;
top: 2px;
left: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn i
{
opacity: 0;
position: absolute;
margin-top: -21px;
top: 2.5rem;
left: 120%;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.btn:hover
{
background: rgba(255,255,255, .9);
border: 1px solid rgba(0,0,0,1);
}
.white .btn:hover
{
background: rgba(0,0,0, .02);
border: 2px solid rgba(0,0,0,1);
}
.btn:hover span
{
color: #333;
left: -20px;
}
a.btn:hover i
{
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实现的动画按钮代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
