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