button.login {
font-weight: 700;
color: white;
text-decoration: none;
padding: .8em 10em calc(.8em + 5px);
border-radius: 10px;
background: rgb(64,199,129);
box-shadow: 0 -3px rgb(53,167,110) inset;
transition: 0.6s;
}
button.login:hover { background: rgb(53, 167, 110); }
button.login:active {
background: rgb(33,147,90);
box-shadow: 0 3px rgb(33,147,90) inset;
}
button.login {
-webkit-transform: translate3D(0, 0, 0);
-webkit-backface-visibility: hidden;
color: #2d2d2d;
padding: 14px 145px 12px;
font-family: "Helvetica";
letter-spacing: 5px;
text-transform: uppercase;
font-weight: 400;
font-size: 20px;
position: left;
overflow: hidden;
text-decoration: none;
display:block;
width:90px;
margin:20px auto;
text-align:center;
}
button.login:after {
padding: 0;
content: '';
width: 95%;
height: 46px;
display: block;
position: absolute;
z-index: -2;
top: 0;
left: 0;
}
button.login:before {
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
content: '';
width: 100%;
height: 60px;
display: block;
position: absolute;
z-index: -1;
border-left: 10px solid white;
box-shadow: -20px 30px 30px white;
background: transparent;
top: 0px;
left: -15px;
margin-left: -1px;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
button.login:hover:before, button.login:active:before,button.login:focus:before {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: translate(115%, 0);
-moz-transform: translate(115%, 0);
-ms-transform: translate(115%, 0);
-o-transform: translate(115%, 0);
transform: translate(115%, 0);
}