css鼠标hover时,背景色动态效果


在鼠标hover时,让button的背景色从上到下出现。

效果:

 

 

 

 

 

Html:

<a href="###" class="join">加入我们,看到自己更多可能</a>

 

 

Css:

a.join{display: inline-block;height: 60px;line-height: 58px;font-size: 24px;color: #fff;border: 2px solid #D7B375;padding: 0 30px;margin-top: 90px;
position: relative;z-index: 1;overflow: hidden;letter-spacing: 2px;}
a:hover{border-color: #fff;}
a.join:after{width: 100%;cursor: pointer;position: absolute;content: "";top: -150%;height: 100%;right: 0;left: 0;z-index: -1;background: #D7B375;
transition: 0.3s linear;}
a.join:hover:after{top: 0%;}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM