.btn {
    margin-top: 40px;
}

.button-border {
    border: 1px solid #cacaca;
    padding: 20px 40px;
    position: relative;
    display: inline-block;
    color: black;
    text-decoration: none;
    background-color: #f5f5f5;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
}

.button-border:hover {
    background-color: #0aba1c91;
    color: white;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
}

/* Effect1
   *************************************** */
/* 擬似要素の共通スタイル */
.button-border::after,
.button-border::before,
.button-border span::after,
.button-border span::before {
    background-color: #0baa1a;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
}

/* 左上へ配置 */
.button-border::after {
    width: 0px;
    height: 2px;
    top: -1px;
    left: -1px;
}

/* 右下へ配置 */
.button-border::before {
    width: 0px;
    height: 2px;
    right: -1px;
    bottom: -1px;
}

/* 左下へ配置 */
.button-border span::after {
    width: 2px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}

/* 右上へ配置 */
.button-border span::before {
    width: 2px;
    height: 0px;
    top: -1px;
    right: -1px;
}

/* hover */
.button-border:hover::after,
.button-border:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}

.button-border:hover span::after,
.button-border:hover span::before {
    height: 100%;
    height: calc(100% + 1px);
}