Hello readers, In this article we’ll learn how to create a Responsive Animated Login Form Using HTML & CSS & JavaScript.Using HTML, CSS and JavaScript, I previously posted a Responsive personal portfolio website using HTML CSS & JavaScript.
The creation of an interactive login form with password and email fields will be our main emphasis today. We will also include a function that will allow you to click the password-showing show button, which will then hide the password show button. By combining HTML, CSS and JavaScript, you can make a striking Animated Login Form. Using its fashionable background and captivating floating label animations, your website can seem better.
The new password toggling button ensures user convenience while enhancing security in this user-friendly form. It enables seamless functionality across all mobile platforms thanks to its Mobile First design strategy and desktop optimisation, improving user experience and accessibility.
Responsive Animated Login Form in HTML CSS & JavaScript
We'll construct a basic HTML file first, as always. Consider it the skeleton of your animated login form. We'll set the groundwork for Login Form in this document by detailing its fundamental structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Login Form using HTML CSS</title>
<link rel="stylesheet" href="./CSS/style.css" />
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
</head>
<body>
<!-- BACKGROUND-WRAPPER -->
<main class="background_wrapper">
<div class="login_form_wrapper">
<!-- FORM -->
<form action="#" class="login__form">
<h1 class="title">Login</h1>
<div class="login_form_content">
<!-- LOGIN-CONTENT-BOX-1 -->
<div class="login_content_box">
<ion-icon name="person-outline"></ion-icon>
<div class="login_content_box--input">
<input
type="email"
placeholder=" "
class="login__input email--input"
required
/>
<label for="email" class="login__label">Email</label>
</div>
</div>
<!-- LOGIN-CONTENT-BOX-2 -->
<div class="login_content_box">
<ion-icon name="lock-closed-outline"></ion-icon>
<div class="login_content_box--input">
<input
type="password"
placeholder=" "
class="login__input password--input"
required
/>
<label for="password" class="login__label">Password</label>
<ion-icon
class="password__hidden"
id="password_hidden"
name="eye-off-outline"
></ion-icon>
</div>
</div>
<!-- REMEMBER-LOGIN -->
<div class="remember_login">
<div class="remember_login_content">
<input type="checkbox" class="remember_login_input" />
<label for="remember" class="remember_login_label text--sm"
>Remember me</label
>
</div>
<!-- FORGET PASSWORD -->
<a href="#" class="forget__login text--sm">Forget password?</a>
</div>
<!-- LOGIN BUTTON -->
<button class="button__login">Login</button>
<!-- REGISTER LOGIN -->
<p class="register__login text--sm">
Don't have an account ? <a href="#">Register</a>
</p>
</div>
</form>
</div>
</main>
<!-- SCRIPT.JS -->
<script src="./JS/script.js"></script>
</body>
</html>
Once our HTML foundation is complete, it's time to style your portfolio using CSS to give it a stunning appearance. The magic wand that allows you to customise everything on your website is called CSS. You may customise the design, select your preferred colours, and even select the ideal typefaces to make it wholly yours.
/* GOOGLE FONT (Roboto:300,400,500) */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
:root
/* ROOT RESET */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
/* HTML RESET */
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input,
button {
border: none;
outline: none;
}
/* ION-ICON RESET */
ion-icon {
--ionicon-stroke-width: 40px;
font-size: 24px;
}
/* BACKGROUND-IMAGE WRAPPER */
.background_wrapper {
position: relative;
width: 100%;
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
}
.background_wrapper::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../img/bg-img.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.88);
z-index: -1;
}
/* LOGIN-FORM */
.login_form_wrapper {
z-index: 999;
position: relative;
background-color: hsla(0, 0%, 10%, 0.1);
border: 2px solid hsl(0, 0%, 90%);
color: hsla(0, 0%, 100%, 0.897);
border-radius: 1.5rem;
backdrop-filter: blur(10px);
padding: 2.5rem 2rem 3.5rem;
width: 26.25rem;
}
/* TITLE */
.title {
display: block;
text-align: center;
font-size: 1.75rem;
font-weight: 500;
margin-bottom: 2rem;
color: hsl(0, 0%, 90%);
letter-spacing: 1px;
}
/* LOGIN-FORM-CONTENT */
.login_form_content {
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.login_content_box {
display: flex;
align-items: center;
column-gap: 0.75rem;
border-bottom: 2px solid hsl(0, 0%, 90%);
}
.login_content_box--input {
width: 100%;
position: relative;
}
/* LOGIN-INPUT */
.login__input {
width: 100%;
padding-block: 0.8rem;
background-color: transparent;
color: hsl(0, 0%, 90%);
position: relative;
z-index: 1;
font-size: 1.125rem;
}
/* LOGIN-LABEL */
.login__label {
position: absolute;
left: 0;
top: 13px;
font-weight: 400;
transition: top 0.3s, font-weight 0.3s;
}
.password--input {
padding-right: 1.8rem;
}
.password__hidden {
position: absolute;
right: 0;
top: 15px;
z-index: 10;
cursor: pointer;
}
.remember_login,
.remember_login_content {
display: flex;
align-items: center;
justify-content: space-between;
}
.remember_login {
margin-bottom: 1rem;
}
.remember_login_content {
column-gap: 0.4rem;
}
.remember_login_input {
width: 0.95rem;
height: 0.95rem;
}
.forget__login {
color: hsl(0, 0%, 90%);
}
.forget__login:hover {
text-decoration: underline;
}
/* BUTTON LOGIN */
.button__login {
width: 100%;
padding: 0.8rem;
border-radius: 0.5rem;
background-color: hsla(0, 0%, 100%, 0.796);
font-weight: 500;
cursor: pointer;
margin-bottom: 2rem;
font-size: 1.1rem;
transition: background-color 0.4s ease;
letter-spacing: 0.5px;
}
.button__login:hover {
background-color: hsla(0, 0%, 0%, 0.796);
color: hsl(0, 0%, 90%);
}
/* REGISTER LOGIN */
.register__login {
text-align: center;
}
.register__login a {
color: hsla(61, 98%, 47%, 0.897);
font-weight: 500;
}
.register__login a:hover {
text-decoration: underline;
}
/* INPUT FOCUS TRANSITION */
.login__input:focus + .login__label {
top: -12px;
font-weight: 500;
}
/* STICKY INPUT ON FOCUS WITH TRANSITION */
.login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label {
top: -12px;
}
Finally, we need to write a JavaScript interactivity function.
/* PASSWORD INPUT */
const Password_input = document.querySelector(".password--input");
/* PASSWORD EYE ICON */
const Password_eye_icon = document.querySelector("#password_hidden");
/* PASSWORD EYE ICON EVENTLISTENER */
Password_eye_icon.addEventListener("click", () => {
if (Password_input.type === "password") {
/* Checking if the password input has the
type of text if so then interchange the icons */
Password_input.type = "text";
Password_eye_icon.setAttribute("name", "eye-outline");
Password_eye_icon.removeAttribute("name", "eye-off-outline");
} else {
Password_input.type = "password";
Password_eye_icon.setAttribute("name", "eye-off-outline");
Password_eye_icon.removeAttribute("name", "eye-outline");
}
});