<style>    *{margin: 0; padding:0;}    .btn{        position: relative;        display: inline-block;        padding: 0 40px 0 15px;        border: 2px solid rgba(255, 255, 255, 0.4);        color: #fff;        font-size: 14px;        text-decoration: none;        line-height: 30px;        -webkit-transition: 0.2s ease;        -moz-transition: 0.2s ease;        -ms-transition: 0.2s ease;        -o-transition: 0.2s ease;        transition: 0.2s ease;    }    .btn i{        position: absolute;        top: 0;        right: 20px;        color: #fff;        font-size: 12px;        -webkit-transition: 0.2s ease;        -moz-transition: 0.2s ease;        -ms-transition: 0.2s ease;        -o-transition: 0.2s ease;        transition: 0.2s ease;    }    .line{position: absolute;        opacity: 0;        background: #fff;        -webkit-transition: 0.2s ease;        -moz-transition: 0.2s ease;        -ms-transition: 0.2s ease;        -o-transition: 0.2s ease;        transition: 0.2s ease;    }    .line-top{        width:0;        height: 2px;        left: -110%;        top: -2px;    }    .line-right{        right: -2px;        top: -110%;        width:2px;        height: 0;    }    .line-bottom{        width:0;        height: 2px;        right: -110%;        bottom: -2px;    }    .line-left{        left: -2px;        bottom: -110%;        width:2px;        height: 0;    }    .btn:hover .line{        opacity: 1;;    }    .btn:hover .line-top{        left: 0;        width: 100%;    }    .btn:hover .line-right{        top: 0;        height: 100%;    }    .btn:hover .line-bottom{        right: 2px;        width: 100%;    }    .btn:hover .line-left{        bottom: 0;        height: 100%;    }    .btn:hover{        border: 2px solid #fff;    }    .btn:hover i{        right: 10px;    }</style><div style="width:400px; padding:100px; margin: 0 auto; background: #444444;">    <a href="#" class="btn">        Buttons        <span class="line line-top"></span>        <span class="line line-right"></span>        <span class="line line-bottom"></span>        <span class="line line-left"></span>        <i>→</i>    </a></div>