重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
css3实现的动画按钮代码分享
这篇文章主要讲解了“css3实现的动画按钮代码分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3实现的动画按钮代码分享”吧！
成都网站制作、成都网站设计介绍好的网站是理念、设计和技术的结合。成都创新互联公司拥有的网站设计理念、多方位的设计风格、经验丰富的设计团队。提供PC端+手机端网站建设，用营销思维进行网站设计、采用先进技术开源代码、注重用户体验与SEO基础，将技术与创意整合到网站之中，以契合客户的方式做到创意性的视觉化效果。
今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换，图标从右侧飞入，第二排的按钮当鼠标经过的时候边框动画切换，图标右侧飞入，效果非常好，一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板
class="btn">Support Us →
Going Down
Up
class="btn">Support Us →
Going Down
Up
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实现的动画按钮代码分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
当前标题：css3实现的动画按钮代码分享
浏览路径：http://cqcxhl.com/article/pppooe.html