.center{
position: absolute;
/*                  top: 50%;*/
left: 50%;
transform: translate(-50%, -50%);
width: 310px;
padding: 0 10px;
text-align: center;
box-sizing: border-box;
transition: all .3s ease .3s;
margin-top: 30px;
}
.center button{
position: relative;
width: 50%;
border: none;
padding: 1px 0;
cursor: pointer;
outline: none;
border-radius: 50px;
background: linear-gradient(#d42c2c, #ae3737, #9e2626);
transition: .5s;
}
button:hover{
background: linear-gradient(#d42c2c, #ae3737, #9e2626);
}
button p{
color: black;
font-size: 22px;
font-weight: 500;
text-transform: uppercase;
margin: 15px;
}
button .loading, button .fa{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
button .loading{
width: 0%;
border-radius: 50px;
background: linear-gradient(#d42c2c, #ae3737, #9e2626);
}
button .fa{
color: white;
font-size: 35px;
line-height: 65px;
transform: scale(0);
}
.center.active{
padding: 0;
}
.center.active button{
background: #000000;
margin-top: 0;
}
.center.active button p{
display: none;
}
.center.active button .loading{
width: 100%;
transition: all 2.7s ease .6s;
}
.center.active button.success{
padding: 35px 0;
width: 250px;
}
.center.active button.success .fa{
transform: scale(1);
transition: transform .2s linear .3s;
}