<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
*{
padding: 0;
margin: 0;
font-size: 30px;
box-sizing: border-box;
}
body{
height: 800px;
width: 360px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, blue, aqua);
}
div{
position: relative;
height: 4rem;
width: 10rem;
background: linear-gradient(45deg, rgb(225,118,203), rgb(7,0,255));
overflow: hidden;
border-radius: 10px;
}
#text{
position: absolute;
width: 100%;
height: 30%;
background: none;
border: none;
border-bottom: 2px solid silver;
text-decoration: none;
bottom: 24%;
outline: none;
transform: translateY(0px);
font-size: 30px;
transition-duration: .4s;
}
#text:focus~label,
#text:valid~label{
left: 0;
transform: translateY(-14px);
font-size: 20px;
transition-duration: .5s;
}
label{
position: absolute;
width: 100%;
height: 30%;
bottom: 34%;
}
div .underline{
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: transparent;
}
div .underline:before{
content: '';
height: 2px;
position: absolute;
width: 100%;
bottom: 24%;
background: #1700ff;
transform: scaleX(0);
}
#text:focus~.underline:before,
#text:valid~.underline:before{
transform: scaleX(1);
transition: transform .6s linear;
}
</style>
</head>
<body>
<div>
<input type="text" name="text" id="text" value="" required/>
<div class="underline"></div>
<label for="text">Name</label>
</div>
</body>
</html>
Comments
Post a Comment