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