.socialbtn {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.5em;
  cursor: pointer;
  overflow: hidden;
}
    .socialbtn:before, .socialbtn:after {
        content: "";
        position: absolute;
        left: 0;
        height: 1px;
        width: 100%;
        
    }
    .socialbtn:before {
        top: 0;
    }
    .socialbtn:after {
        bottom: 0;
    }
    .socialbtn:hover > * > *:before, .socialbtn:hover > * > *:after {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .socialbtn:hover > * > * > *:before, .socialbtn:hover > * > * > *:after {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .socialbtn > *:before, .socialbtn > *:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 1px;
        background-color: #646464;
    }
    .socialbtn > *:before {
        left: 0;
    }
    .socialbtn > *:after {
        right: 0;
    }
    .socialbtn > * > *:before, .socialbtn > * > *:after {
        content: "";
        position: absolute;
        left: 0;
        z-index: 9;
        height: 1px;
        width: 100%;
        background-color: #000;
    }
    .socialbtn > * > *:before {
        top: 0;
        -webkit-transform: translate3d(-105%, 0, 0);
        transform: translate3d(-105%, 0, 0);
        transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .socialbtn > * > *:after {
        bottom: 0;
        -webkit-transform: translate3d(105%, 0, 0);
        transform: translate3d(105%, 0, 0);
        transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .socialbtn > * > * > *:before, .socialbtn > * > * > *:after {
        content: "";
        position: absolute;
        top: 0;
        z-index: 9;
        height: 100%;
        width: 1px;
        background-color: #000;
    }
    .socialbtn > * > * > *:before {
        left: 0;
        -webkit-transform: translate3d(0, 105%, 0);
        transform: translate3d(0, 105%, 0);
        transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .socialbtn > * > * > *:after {
        right: 0;
        -webkit-transform: translate3d(0, -105%, 0);
        transform: translate3d(0, -105%, 0);
        transition: -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }