【demo】button效果demo

• 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>