https://www.cnblogs.com/linhaisheng/p/12973325.html

Html:

<span style="font-size: 18px">&lt;a href=&quot;###&quot; class=&quot;join&quot;&gt;加入我们，看到自己更多可能&lt;/a&gt;</span>

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: &quot;&quot;;top: -150%;height: 100%;right: 0;left: 0;z-index: -1;background: #D7B375;
transition: 0.3s linear;}
a.join:hover:after{top: 0%;}