Designing forms doesn’t always have to be boring! A login form is one of the most common elements of any website, and giving it a modern, animated touch can make your project stand out. In this tutorial, we’ll walk through how to build a glowing login form with animated effects using only HTML and CSS.
Why This Login Form is Special?
Unlike traditional static forms, this design adds an animated glowing circle effect in the background. It looks like form is surrounded by rotating neon aura – giving your page a futuristic and professional look.
Key features:
- Animated glowing circle effect using pure CSS.
- Clean and minimal login form UI.
- Floating labels for inputs (Email & Password).
- Forgot password link and signup link (you can add it later).
- Fully responsive design.
Project Setup
We’ll be working with three files:
- index.html: Structure of the form.
- style.css: Styling and glowing circle animation.
- (Optional) script.js: If you want to add extra interactivity later.
HTML Structure
The HTML file includes a container with animated spans for the glowing effect, and inside it a clean login form with email and password fields, a login button, and extra links.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated Login form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="login-box">
<h2>Login</h2>
<form action="#">
<div class="input-box">
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" required>
<label>Password</label>
</div>
<div class="forgot-password">
<a href="#">Forgot Password?</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="signup-link">
<a href="#">Signup</a>
</div>
</form>
</div>
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<span style="--i:21;"></span>
<span style="--i:22;"></span>
<span style="--i:23;"></span>
<span style="--i:24;"></span>
<span style="--i:25;"></span>
<span style="--i:26;"></span>
<span style="--i:27;"></span>
<span style="--i:28;"></span>
<span style="--i:29;"></span>
<span style="--i:30;"></span>
<span style="--i:31;"></span>
<span style="--i:32;"></span>
<span style="--i:33;"></span>
<span style="--i:34;"></span>
<span style="--i:35;"></span>
<span style="--i:36;"></span>
<span style="--i:37;"></span>
<span style="--i:38;"></span>
<span style="--i:39;"></span>
<span style="--i:40;"></span>
<span style="--i:41;"></span>
<span style="--i:42;"></span>
<span style="--i:43;"></span>
<span style="--i:44;"></span>
<span style="--i:45;"></span>
<span style="--i:46;"></span>
<span style="--i:47;"></span>
<span style="--i:48;"></span>
<span style="--i:49;"></span>
</div>
<!-- partial -->
</body>
</html>CSS Styling & Animation
This is where the magic happens! Using CSS keyframes, we animate multiple spans in a circular layout that creates the glowing effect around the form. We also add modern input styles with floating labels for a professional touch.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins";
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #1f293a;
min-height: 100vh;
}
.container {
position: relative;
width: 256px;
height: 256px;
display: flex;
justify-content: center;
align-items: center;
}
.container span {
position: absolute;
left: 0;
width: 32px;
height: 6px;
background: #2c4766;
border-radius: 8px;
transform-origin: 128px;
transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50)));
animation: animateBlink 3s linear infinite;
animation-delay: calc(var(--i) * (3s / 50));
}
@keyframes animateBlink {
0% {
background: #0ef;
}
25% {
background: #2c4766;
}
}
.login-box {
position: absolute;
width: 400px;
}
.login-box form {
width: 100%;
padding: 0 50px;
}
h2 {
font-size: 2em;
color: #0ef;
text-align: center;
}
.input-box {
position: relative;
margin: 25px 0;
}
.input-box input {
width: 100%;
height: 50px;
background: transparent;
border: 2px solid #2c4766;
outline: none;
border-radius: 40px;
font-size: 1em;
color: #fff;
padding: 0 20px;
transition: 0.5s;
}
.input-box input:focus,
.input-box input:valid {
border-color: #0ef;
}
.input-box label {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
font-size: 1em;
color: #fff;
pointer-events: none;
transition: 0.5s ease;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
top: 1px;
font-size: 0.8em;
background-color: #1f293a;
padding: 0 6px;
color: #0ef;
}
.forgot-password {
margin: -15px 0 10px;
text-align: center;
}
.forgot-password a {
font-size: 0.85em;
color: #fff;
text-decoration: none;
}
.forgot-password a:hover {
text-decoration: underline;
}
.btn {
width: 100%;
height: 45px;
border-radius: 45px;
background: #0ef;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
color: #1f293a;
font-weight: 600;
}
.signup-link {
margin: 20px 0 10px;
text-align: center;
}
.signup-link a {
font-size: 1em;
color: #0ef;
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
text-decoration: underline;
}Final Result
Once you save the files and open the in a browser, you’ll see a modern login form with a glowing, animated circle rotating around it. The form feels futuristic and is sure to catch attention.
Can I simply say what a reduction to search out someone who really is aware of what theyre talking about on the internet. You definitely know the way to bring a problem to mild and make it important. More folks have to read this and perceive this aspect of the story. I cant consider youre no more standard since you definitely have the gift.
RI
I appreciate how you focused on real-world applications rather than just theory. This makes the content so much more valuable in practice.