a {
font-size: 1.5em;
letter-spacing: 0.1em;
text-decoration: none;
}
.btn {
position: relative;
display: inline-block;
padding: 0.5em 2em;
cursor: pointer;
overflow: hidden;
}
.btn:before,
.btn:after {
content: "";
position: absolute;
left: 0;
height: 2px;
width: 100%;
background-color: #252525;
}
.btn:before {
top: 0;
}
.btn:after {
bottom: 0;
}
.btn:hover > * > *:before,
.btn:hover > * > *:after {
transform: translate3d(0, 0, 0);
}
.btn:hover > * > * > *:before,
.btn:hover > * > * > *:after {
transform: translate3d(0, 0, 0);
}
.btn > *:before, .btn > *:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 2px;
background-color: #252525;
}
.btn > *:before {
left: 0;
}
.btn > *:after {
right: 0;
}
.btn > * > *:before,
.btn > * > *:after {
content: "";
position: absolute;
left: 0;
z-index: 9;
height: 2px;
width: 100%;
background-color: #168dff;
}
.btn > * > *:before {
top: 0;
transform: translate3d(-105%, 0, 0);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > *:after {
bottom: 0;
transform: translate3d(105%, 0, 0);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:before,
.btn > * > * > *:after {
content: "";
position: absolute;
top: 0;
z-index: 9;
height: 100%;
width: 2px;
background-color: #168dff;
}
.btn > * > * > *:before {
left: 0;
transform: translate3d(0, 105%, 0);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn > * > * > *:after {
right: 0;
transform: translate3d(0, -105%, 0);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
