1.input-container{2position: relative;3}45.input{6padding: 10px;7height: 40px;8border: 2px solid #0B2447;9border-top: none;10border-bottom: none;11font-size: 16px;12background: transparent;13outline: none;14box-shadow: 7px 7px 0px 0px #0B2447;15transition: all 0.5s;16}1718.input:focus{19box-shadow: none;20transition: all 0.5s;21}2223.label{24position: absolute;25top: 10px;26left: 10px;27color: #0B2447;28transition: all 0.5s;29transform:scale(0);30z-index: -1;31}3233.input-container .topline{34position: absolute;35content:"";36background-color: #0B2447;37width: 0%;38height: 2px;39right: 0;40top: 0;41transition: all 0.5s;42}4344.input-container input[type="text"]:focus ~ .topline{45width: 35%;46transition: all 0.5s;47}4849.input-container .underline{50position: absolute;51content:"";52background-color: #0B2447;53width: 0%;54height: 2px;55right: 0;56bottom: 0;57transition: all 0.5s;58}5960.input-container input[type="text"]:focus ~ .underline{61width: 100%;62transition: all 0.5s;63}6465.input-container input[type="text"]:focus ~ .label{66top: -10px;67transform:scale(1);68transition: all 0.5s;69}
HTML
1<divclass="input-container">2<inputclass="input"name="text"type="text">3<labelclass="label"for="input">Enter Your Name</label>4<divclass="topline"></div>5<divclass="underline"></div>6</div>