style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 370px;
border-radius: 20px;
box-shadow: 1px 1px 15px 15px rgba(0,0,0,0.5);
}
.wrapper > .form-title{
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 100px;
color:white;
user-select: none;
border-radius: 15px 15px 0 0;
background: #12c2e9;
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.wrapper > form{
padding: 20px 40px 60px 30px;
}
.wrapper > form > .form-field{
height: 50px;
width: 100%;
margin-top: 20px;
position: relative;
}
.wrapper > form .form-field > input{
height: 100%;
width: 100%;
outline: none;
font-size: 20px;
padding-left: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 25px;
}
.wrapper > form .form-field > input:focus{
border-color: #1030d3;
}
.wrapper > form > .form-field label{
position: absolute;
top: 50%;
left: 20px;
color: #6d6d6d;
font-weight: 400;
font-size: 20px;
pointer-events: none;
transform: translateY(-50%);
}
form > .form-field > input:focus ~ label{
top: 0%;
font-size: 20px;
border-color: #052fff;
}
form > .form-field > input[type="submit"]{
color: #fff;
border: none;
padding-left: 0;
font-size: 20px;
font-weight: 500;
cursor: pointer;
background: #12c2e9;
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
form > .form-field > input[type="submit"]:hover{
background: #12c2e9bd; 
background: -webkit-linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
background: linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
transform: scale(1.11);
}
form > .link{
margin-top: 25px;
text-align: center;
}
form > .link a{
color: #132ecc;
}