Animated login form by HTML and CSS
Here we are going to make an animated login form using HTML and CSS only.
Copy this HTML code and save it as "index.html" on your device.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FrontLab Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form action="">
<div class="user-box">
<input type="text" name="" id="" required="">
<label for="">Username</label>
</div>
<div class="user-box">
<input type="password" name="" id="" required="">
<label for="">Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Login
</a>
</form>
</div>
</body>
</html>
Copy this CSS code and save it as "style.css" on your device.
CSS:
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,400;1,500;1,600&display=swap");
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.user-box {
position: relative;
}
.user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.user-box input:focus {
border-bottom-color: #04aa6d;
}
.user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: all 0.5s;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
top: -20px;
left: 0;
color: #04aa6d;
font-size: 13px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #04aa6d;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: all 0.5s;
margin-right: 40px;
letter-spacing: 4px;
}
.login-box a:hover {
background: #04aa6d;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #04aa6d, 0 0 25px #04aa6d, 0 0 50px #04aa6d,
0 0 100px #04aa6d;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #04aa6d);
animation: anim1 1s linear infinite;
}
@keyframes anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #04aa6d);
animation: anim2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #04aa6d);
animation: anim3 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #04aa6d);
animation: anim34 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes anim34 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
Output of the given Codes:
0 Comments