鼠标hover按钮闪动填充效果,按钮hover动画效果
style:
<style> .la-btn{ padding: 14px 20px; background: #1abc9c; color: #fff; font-size: 14px; overflow: hidden; transition: all .35s; display: inline-block; position: relative; z-index: 1;} .la-btn:hover{ color: #fff; background: none;} .la-btn:before{ visibility: hidden; content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 100%; background: #2a2b2c; z-index: -1; transform: skew(45deg, 0); transition: all .35s;} .la-btn:hover:before{ visibility: visible; width: 150%; left: -25%;} .la-session-more{ text-align: center; margin-top: 30px;} .la-session-more a{ width: 229px; height: 44px; border: 1px solid #dbdbdb; padding: 0; background: none; text-align: center; color: #212121; line-height: 44px; margin: 0 15px; text-decoration: none;} .la-session-more a:hover{ border-color: #2a2b2c; background: none;} </style>
html:
<div class="la-session-more"> <a href="#" class="la-btn">查看全部案例</a> </div>
效果:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/555
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!