Creating an animated login page seamlessly blends aesthetics and function, enhancing user interaction and security. This approach transforms the login experience into an engaging and visually appealing journey.
An animated login page is a digital canvas for designers and developers to infuse creativity and brand identity. Through captivating animations, vibrant colors, and compelling graphics, it grabs users’ attention and reinforces brand recognition.
The page also excels in providing real-time feedback and bolstering security. Thoughtful animations convey information intuitively, such as a subtle shake for incorrect passwords or a smooth transition for successful logins. Integrating interactive elements, like CAPTCHA challenges within animations, fortifies against unauthorized access.
Moreover, animations guide users through the login process, reducing errors and friction. They create a user-friendly and intuitive interface.
In summary, an animated login page elevates user engagement by harmonizing form and function. Whether for a personal blog or complex web application, it adds an innovative dimension to enhance digital presence and user interaction.
Steps to Create animated login form using html and css
1: Create a folder . name whatever you want to give you can give. and create these files which is mentioned bellow under main folder.
2: Create index.html in main file and make sure your extention should be .html .
3: Create style.css in main file and make sure your extention should be .css
NOTE: if you have any issue or doubt so please contact us or leave your valueable comments
Here is index.html
<!DOCTYPE html>
<html lang="en" >
<!-- visit www.codebyrolex.com -->
<head>
<meta charset="UTF-8">
<title> Animated Login Form - Codebyrolex</title>
<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><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<section>
<form>
<h1>Login</h1>
<div class="inputbox">
<ion-icon name="mail-outline"></ion-icon>
<input type="email" required>
<label for="">Email</label>
</div>
<div class="inputbox">
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" required>
<label for="">Password</label>
</div>
<div class="forget">
<label for=""><input type="checkbox">Remember Me</label>
<a href="#">Forget Password</a>
</div>
<button>Log in</button>
<div class="register">
<p>Don't have a account <a href="#">Register</a></p>
</div>
</form>
</section>
</body>
<!-- partial -->
</body>
</html>
Here is style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
/* visit www.codebyrolex.com */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: url(https://user-images.githubusercontent.com/13468728/233847739-219cb494-c265-4554-820a-bd3424c59065.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section {
position: relative;
max-width: 400px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
backdrop-filter: blur(55px);
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 3rem;
}
h1 {
font-size: 2rem;
color: #fff;
text-align: center;
}
.inputbox {
position: relative;
margin: 30px 0;
max-width: 310px;
border-bottom: 2px solid #fff;
}
.inputbox label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
color: #fff;
font-size: 1rem;
pointer-events: none;
transition: all 0.5s ease-in-out;
}
input:focus ~ label,
input:valid ~ label {
top: -5px;
}
.inputbox input {
width: 100%;
height: 60px;
background: transparent;
border: none;
outline: none;
font-size: 1rem;
padding: 0 35px 0 5px;
color: #fff;
}
.inputbox ion-icon {
position: absolute;
right: 8px;
color: #fff;
font-size: 1.2rem;
top: 20px;
}
.forget {
margin: 35px 0;
font-size: 0.85rem;
color: #fff;
display: flex;
justify-content: space-between;
}
.forget label {
display: flex;
align-items: center;
}
.forget label input {
margin-right: 3px;
}
.forget a {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.forget a:hover {
text-decoration: underline;
}
button {
width: 100%;
height: 40px;
border-radius: 40px;
background-color: rgb(255, 255,255, 1);
border: none;
outline: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.4s ease;
}
button:hover {
background-color: rgb(255, 255,255, 0.5);
}
.register {
font-size: 0.9rem;
color: #fff;
text-align: center;
margin: 25px 0 10px;
}
.register p a {
text-decoration: none;
color: #fff;
font-weight: 600;
}
.register p a:hover {
text-decoration: underline;
}
