// HTML
<body>
<form>
<h1>Please login</h1>
<label><span>Username</span>
<input type="text" name="login" value="" placeholder=" " >
</label>
<label><span>Password</span>
<input type="password" name="pswd" value="" placeholder=" ">
</label>
<input type="submit" value="Ok">
<hr>
<h4>or <a href="">subscribe</a></h4>
</form>
</body>
// CSS
body{
height: 100%;
max-height: 100%;
}
form{
max-width:320px;
margin:auto;
border:1px solid rgba(0,0,0,0.2);
border-radius: 0.5em;
padding:0.5em;
background:var(--color);
position : relative;
top: 50%;
transform: translateY(-50%);
}
label{
display: block;
margin-top:1em;
}
input{
outline: 0;
display: block;
width:100%;
border-radius: 0.5em;
border:1px solid rgba(0,0,0,0.2);
margin-top:0.5em;
}
input[name="login"]{
padding:0.5em;
padding-left:24px;
background: url(http://api.warriordudimanche.net/iconeleon/?i=fontawesome%20solid/circle-user.svg&c=black) no-repeat 4px center;
background-size: 16px 16px;
}
input[type="password"]{
padding:0.5em;
padding-left:24px;
background: url(http://api.warriordudimanche.net/iconeleon/?i=elusive/unlock-alt.svg&c=black) no-repeat 4px center;
background-size: 16px 16px;
}
label span{
position: relative;
top:2em;
left:24px;
transition:all 500ms;
}
label:has(input:placeholder-shown) span{
position: relative;
top:2em;
left:24px;
transition:all 500ms;
}
label:has(input:focus) span,
label:has(input:not(:placeholder-shown)) span
{
color:blue;
top:0;
left:0;
transition:all 500ms;
}