鼠标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.html

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！