Material Design Input Fields CSS3

Mimicking the effect of Material Design input fields using CSS. When focused, placeholder text will offset a bit to the top and act as a label. Only difference is that the label disappears when you start typing, which it shouldn’t. This is because I used the input’s placeholder attribute instead of a label element.

HTML

<form>
<input class="field" placeholder="Username" type="text">
<input class="field" placeholder="Password" type="password">
<input class="submit" type="submit" value="Login">
</form>

<form>

</form>

CSS

.field {
margin: 25px auto;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: 
linear-gradient(to bottom,
rgba(255, 255, 255, 0) 96%,
#1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
.field::-webkit-input-placeholder {
transition: all 0.3s ease-in-out;
}
.field:focus {
box-shadow: none;
outline: none;
background-position: 0 0;
}
.field:focus::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
.submit {
display: block;
margin: 25px auto;
box-sizing: border-box;
padding: 10px 30px;
background-color: #1abc9c;
border: 1px solid #1abc9c;
color: #FFF;
border-radius: 3px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.submit:hover {
background-color: #FFF;
color: #1abc9c;
}