<a class="btn"><span>Go to Home</span><em></em></a>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background: #006b62;
position: relative;
}
.btn {
cursor: pointer;
background-color: #000;
width: 330px;
height: 64px;
line-height: 64px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0;
box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.34);
}
.btn span {
color: #fff;
display: block;
padding-left: 35px;
text-transform: uppercase;
font: bold 18px/66px Arial;
transform: scaleX(0.6);
letter-spacing: 3px;
transform-origin: center left;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.btn em {
position: absolute;
height: 1px;
background: #fff;
width: 47%;
right: 23px;
top: 50%;
transform: scaleX(0.25);
transform-origin: center right;
transition: all 0.3s ease;
z-index: 1;
}
.btn:before, .btn:after {
content: '';
background: #fff;
height: 50%;
width: 0;
position: absolute;
transition: .3s cubic-bezier(.785,.135,.15,.86);
}
.btn:before {
top: 0;
left: 0;
right: auto;
}
.btn:after {
bottom: 0;
right: 0;
left: auto;
}
.btn:hover:before {
width: 100%;
right: 0;
left: auto;
}
.btn:hover:after {
width: 100%;
left: 0;
right: auto;
}
.btn:hover span {
color: #000;
}
.btn:hover em {
background: #000;
transform: scaleX(1);
}