Hey folks! Today, let’s jazz up your login experience by creating an Animated Login Form with Glowing Input using just HTML and CSS. It’s a simple yet stylish way to add some flair to your login pages.
In this tutorial, we’ll focus on HTML for the structure and CSS for the animations. Whether you’re a seasoned coder or just starting out, this is a fantastic opportunity to enhance your skills and give your login forms a touch of magic.
Why an animated login form with glowing input, you ask? Well, it’s all about making your login process visually appealing.
Join me on this coding journey into the world of Animated Login Forms. Let’s keep it fun and dynamic with HTML and CSS. Ready to bring some life to your login pages? Let’s get started on our Animated Login Form with Glowing Input adventure!
HTML :
This HTML document creates an animated login form with glowing input fields. It includes a form with fields for email or phone and password. The login button triggers the login action, and there’s a link to sign up if the user is not a member. The styling and animation are handled by an external stylesheet linked in the head of the document.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated Login Form with Glowing Input | CodingStella </title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login-form">
<div class="text">
LOGIN
</div>
<form>
<div class="field">
<div class="fas fa-envelope"></div>
<input type="text" placeholder="Email or Phone">
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" placeholder="Password">
</div>
<button>LOGIN</button>
<div class="link">
Not a member?
<a href="#">Signup now</a>
</div>
</form>
</div>
<!-- partial -->
</body>
</html>
CSS :
This CSS code defines styles for a login form. It uses the Poppins font from Google Fonts and sets up a centered and styled login form. The form has a dark background, glowing input fields with animations on focus, and a button with a hover effect. Additionally, there is styling for links and text within the form.
The form is designed to have a modern and sleek appearance, providing a visually appealing user interface for a login page.
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #151515;
}
.login-form {
position: relative;
width: 370px;
height: auto;
background: #1b1b1b;
padding: 40px 35px 60px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 5px;
box-shadow: inset 0 0 1px #272727;
}
.text {
font-size: 30px;
color: #c7c7c7;
font-weight: 600;
letter-spacing: 2px;
}
form {
margin-top: 40px;
}
form .field {
margin-top: 20px;
display: flex;
}
.field .fas {
height: 50px;
width: 60px;
color: #868686;
font-size: 20px;
line-height: 50px;
border: 1px solid #444;
border-right: none;
border-radius: 5px 0 0 5px;
background: linear-gradient(#333, #222);
}
.field input,
form button {
height: 50px;
width: 100%;
outline: none;
font-size: 19px;
color: #868686;
padding: 0 15px;
border-radius: 0 5px 5px 0;
border: 1px solid #444;
caret-color: #339933;
background: linear-gradient(#333, #222);
}
input:focus {
color: #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
background: linear-gradient(#333933, #222922);
animation: glow 0.8s ease-out infinite alternate;
}
@keyframes glow {
0% {
border-color: #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),
inset 0 0 10px rgba(0, 255, 0, 0.4);
}
}
button {
margin-top: 30px;
border-radius: 5px !important;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
button:hover {
color: #339933;
border: 1px solid #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.3), 0 0 10px rgba(0, 255, 0, 0.2),
0 0 15px rgba(0, 255, 0, 0.1), 0 2px 0 black;
}
.link {
margin-top: 25px;
color: #868686;
}
.link a {
color: #339933;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
There you have it! We’ve just wrapped up creating an Animated Login Form with Glowing Input using HTML and CSS. Your login pages are now not only functional but also look cool with those subtle animations.
Whether you’re a pro or just starting, I hope you enjoyed this tutorial. Feel free to customize it and make it your own.
If you happen to face any problems along the way in your project, keep calm. Hit the Download button, secure the source code, and face your coding problems with a sense of curiosity and excitement. Happy coding!
