Let’s create a Glowing Animated Login Form using HTML and CSS! This form will have a modern design with a glowing effect and smooth animations, making it look stylish and interactive.
We’ll use HTML to structure the form and CSS to add glowing input fields, animated buttons, and a sleek layout. This project is perfect for practicing form design and adding creative touches to your web pages.
Whether you’re a beginner or an experienced developer, this is a fun and easy project to enhance your front-end skills. Let’s get started!
More login form source code – Click here
HTML :
This HTML creates a glowing animated login form with a heading, username and password input fields, a sign-in button, and links for “Forgot Password” and “Sign Up”; it uses external CSS for styling and Font Awesome icons for visual elements.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Glowing Animated Login Form</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="box">
<div class="login">
<div class="loginBx">
<h2>
<i class="fa-solid fa-right-to-bracket"></i>
Login
<i class="fa-solid fa-heart"></i>
</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Sign in" />
<div class="group">
<a href="#">Forgot Password</a>
<a href="#">Sign up</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
This code creates an animated login form with a glowing, rotating border. The box changes size on hover, and the form inside slides up smoothly. It uses stylish fonts, gradients, and shadows for a cool, futuristic look.
@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;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252432;
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.box {
position: relative;
width: 400px;
height: 200px;
background: repeating-conic-gradient(
from var(--a),
#ff2770 0%,
#ff2770 5%,
transparent 5%,
transparent 40%,
#ff2770 50%
);
filter: drop-shadow(0 15px 50px #000);
animation: rotating 4s linear infinite;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.box:hover {
width: 450px;
height: 500px;
}
@keyframes rotating {
0% {
--a: 0deg;
}
100% {
--a: 360deg;
}
}
.box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-conic-gradient(
from var(--a),
#45f3ff 0%,
#45f3ff 5%,
transparent 5%,
transparent 40%,
#45f3ff 50%
);
filter: drop-shadow(0 15px 50px #000);
border-radius: 20px;
animation: rotating 4s linear infinite;
animation-delay: -1s;
}
.box::after {
content: "";
position: absolute;
inset: 4px;
background: #2d2d39;
border-radius: 15px;
border: 8px solid #25252b;
}
.login {
position: absolute;
inset: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
flex-direction: column;
background: rgba(0, 0, 0, 0.2);
z-index: 1000;
box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
transition: 0.5s;
color: #fff;
overflow: hidden;
}
.box:hover .login {
inset: 40px;
}
.loginBx {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateY(126px);
gap: 20px;
width: 70%;
transition: 0.5s;
}
.box:hover .loginBx {
transform: translateY(0px);
}
.loginBx h2 {
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.loginBx h2 i {
color: #ff2770;
text-shadow: 0 0 5px #ff2770, 0 0 30px #ff2770;
}
.loginBx input {
width: 100%;
padding: 10px 20px;
outline: none;
font-size: 1em;
color: #fff;
background: rgba(0, 0, 0, 0.1);
border: 2px solid #fff;
border-radius: 30px;
}
.loginBx input::placeholder {
color: #999;
}
.loginBx input[type="submit"] {
background: #45f3ff;
border: none;
font-weight: 500;
color: #111;
cursor: pointer;
transition: 0.5s;
}
.loginBx input[type="submit"]:hover {
box-shadow: 0 0 10px #45f3ff, 0 0 60px #45f3ff;
}
.group {
display: flex;
width: 100%;
justify-content: space-between;
}
.group a {
color: #fff;
text-decoration: none;
}
.group a:nth-child(2) {
color: #ff2770;
font-weight: 600;
}
In conclusion, creating a Glowing Animated Login Form using HTML and CSS is a simple and creative way to improve your web design skills. This project gives your login page a modern and interactive look with glowing effects and smooth animations.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
