<div class="text-input">
<input type="text" id="input1" placeholder="Try typing something in here!">
<label for="input1">Name</label>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Montserrat;
background: #313E50;
}
.text-input{
position: relative;
margin-top: 50px;
input[type="text"]{
display: inline-block;
width: 500px;
height: 40px;
box-sizing: border-box;
outline: none;
border: 1px solid lightgray;
border-radius: 3px;
padding: 10px 10px 10px 100px;
transition: all 0.1s ease-out;
}
input[type="text"] + label{
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 40px;
line-height: 40px;
color: white;
border-radius: 3px 0 0 3px;
padding: 0 20px;
background: #E03616;
transform: translateZ(0) translateX(0);
transition: all 0.3s ease-in;
transition-delay: 0.2s;
}
input[type="text"]:focus + label{
transform: translateY(-120%) translateX(0%);
border-radius: 3px;
transition: all 0.1s ease-out;
}
input[type="text"]:focus{
padding: 10px;
transition: all 0.3s ease-out;
transition-delay: 0.2s;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.