Learn the art of web development with our step-by-step tutorial on creating an animated login form using HTML and CSS.
Hello, everyone! Want to add some flair to your website? Learn how to create an Animated Login Form using HTML and CSS. It’s a simple yet effective way to inject dynamism into your user interface. Whether you’re a seasoned coder or just dipping your toes into web development, this tutorial is a great opportunity to enhance your projects.
Table of Contents
Welcome to our tutorial on creating an animated login form using HTML and CSS. In this guide, we’ll walk you through the process, step by step, to enhance your web development and UI design skills.
HTML
- Create a Folder:
- You can create a new folder anywhere you’d like on your computer. Could you give it a name of your choice? For example, let’s call it “my website.”
- Inside the Folder:
- Open the newly created folder (“my-website” in our example).
- Inside this folder, create the following files:
- Create an
index.htmlFile:- Right-click inside the folder and choose New Text Document.
- Rename the newly created text document to “index.html” (make sure to remove the “.txt” extension).
- Open the “index.html” file using a text editor (such as Notepad or Visual Studio Code).
<!DOCTYPE html>
<html lang="en">
<!-- AC Zone By Animationcoding.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Sign Up</h1>
<p>Enter your account details</p>
<div class="Flx">
<div class="box">
<input type="Name" placeholder="Name">
<label></label>
</div>
<div class="box">
<input type="email" placeholder="email">
<label></label>
</div>
<div class="box">
<input type="password" placeholder="password">
<label></label>
</div>
</div>
<p class="psd">Already have an account?<a style="color: #fff;">Login</a></p>
<a href="" class="bn5">Hover</a>
</div>
</body>
</html>
CSS
2. Create a style.css File:
- Right-click inside the folder again and choose New Text Document.
- Rename the newly created text document to
style.css(remove the “.txt” extension). - Open the
style.cssfile using a text editor.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #101010;
display: grid;
height: 100vh;
place-items: center;
}
.container {
background: #232423;
box-shadow: 0px 0px 30px rgb(36 46 55 / 4%);
max-width: 500px;
width: 400px;
padding: 40px 25px;
border-radius: 10px;
position: relative;
display: block;
margin-top: 4rem;
text-align: center;
position: relative;
}
h1 {
color: #ffffff;
margin-bottom: 30px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
.Flx {
display: grid;
gap: 20px;
}
input::placeholder {
color: #acabac;
font-weight: 500;
}
input {
width: 100%;
margin: 0 auto;
padding: 10px 12px;
height: 60px;
font-size: 16px;
border-radius: 10px;
font-weight: 500;
background: rgb(55, 55, 55);
outline: none;
border: none;
color: #FFF;
position: relative;
z-index: 2;
}
.box {
position: relative;
}
input::placeholder {
color: #FFF;
}
.bn5 {
margin: 0 auto;
padding: 10px 30px;
height: 60px;
border: none;
outline: none;
color: rgb(255, 255, 255);
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
width: 100%;
text-decoration: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
p {
color: #fff;
}
.psd {
margin-top: 16px;
margin-bottom: 40px;
color: #ffffff94;
text-align: start;
}
.box:hover label {
opacity: 1;
}
.box label {
z-index: 1 !important;
}
.box label,
.container::before,
.bn5:before {
content: "";
background: linear-gradient(45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowingbn5 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
@keyframes glowingbn5 {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.bn5:active {
color: #000;
}
.bn5:active:after {
background: transparent;
}
.container:hover::before,
.bn5:hover:before {
opacity: 1;
}
.bn5:after {
z-index: -2;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #191919;
left: 0;
top: 0;
border-radius: 10px;
}
If you face any problem in the source link given above, then you people do not need to be afraid, what we have done is that I have created a download folder and packed it for you, so you do not have to do anything. Below you will be getting an option download link click on it and you can download this file to all files.
Animated Radial Menu animate style animation coding animationcoding Clean Toast Notifications with CSS create password css digital clock digital clock using html and css figma html and css icons Image Slider javascript JavaScript Clock Digital login design page login from pdf Personal Portfolio Python 3 Cheat Sheet PDF react react login react login from Top 5 VSCode Extensions Top 5 VSCode Extensions for 2024 ui ui kit