-
body { margin: 0; background: #eee; } .box { display: flex; width: 1200px; height: 300px; margin: 0 auto; } .button { position: relative; width: 300px; height: 50px; background: #ddd; border: 2px solid rgb(255,255,255,0.8) ; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; line-height: 50px; color: #000; box-sizing: border-box; } .button:hover { border: 2px solid rgb(255,255,255,1) ; } .line { display: block; position: absolute; height: 2px; background: #fff; transition: all .3s ease; } .line-top { top: -2px; left: -100px; width: 0; } .button:hover .line-top { width: 100%; left: 0; } .line-right { height: 0; width: 2px; left: -2px; top: 100px; } .button:hover .line-right { height: 100%; top: 0; } .line-bottom { bottom: -2px; right: -100px; height: 2px; width: 0; } .button:hover .line-bottom { width: 100%; right: 0; } .line-left { right: -2px; height: 0; width: 2px; top: -100px; } .button:hover .line-left { top: 0; height: 100%; }
<div class="box"> <div class="button"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> MISSION </div> <div class="button"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> PLAY </div> </div>
【demo】button效果demo
最新推荐文章于 2021-02-16 12:02:01 发布