2.1K
Animated Login Form Using HTML and CSS
Without using JavaScript we can make awesome animation. Day by day CSS developer team adding new features so we can create easily animation effect. In this tutorial, I am going to make an animated login form using HTML and CSS. When you click the input section in the form the input section expand smoothly. Let’s see the example.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Animated Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="box">
<h1>LogIn</h1>
<input type="text" name="" placeholder="Username" class="text-input">
<input type="password" name="" placeholder="Password" class="text-input">
<input type="submit" name="" value="Login">
</form>
</body>
</html>
CSS
body {
margin:0px;
padding:0px;
font-family: sans-serif;
background: #739cb8;
}
.box {
width: 280px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
border-radius:20px;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.text-input {
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 25px;
transition: 0.25s;
}
.text-input:focus {
width: 250px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 25px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
