首页 > 代码库 > 按钮动画效果
按钮动画效果
<a href="http://www.mamicode.com/#" class="a-btn">中秋节快乐啊。。。</a>
.a-btn{ display:block; position:relative; width:300px; margin:30px auto; height:40px; line-height:40px; border:2px ridge #fff; color:#fff; text-align:center; background:#343434; z-index:2;}
.a-btn:before,.a-btn:after{ content:""; display:block; width:50%; height:100%; position:absolute; top:0; z-index:1; }
.a-btn:before{left:0; }
.a-btn:after{ right:0; }
.a-btn:hover{background-color: #FFC340; }
.a-btn, .a-btn:before,.a-btn:after{transition: all 0.3s ease 0s;}
.a-btn:hover:before,.a-btn:hover:after{ width:0; background-color: #fff; }
按钮动画效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。