Edit in JSFiddle

<div class="btn-space">
<a href="#" class="border-btn">
ボタン４
</a>
</div>

.btn-space{
  padding-top: 50px;
  a{
    width: 200px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    background: #00a5a0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    display: block;
  }
}
.border-btn{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border: 2px solid #fff;
      background: none;
      text-align: center;
      position: absolute;
      top: 3px;
      left: 3px;
    }
    &:hover{
      &:before{
        border: none;
      }
    }
  }