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%;}