Hello friends, today in this blog you’ll learn Animated Login Form Using HTML & CSS . We’ll use Html & Css to create this Animated Login Form . Earlier I’ve shared a blog on Css Image Hover Effect Using Html Css | Css Image Card Hover Effect .
If You have any Problem so, I Also Created a full video tutorial on this Animated Login Form Using HTML & CSS you can see this tutorial .
Video Tutorial of ” Animated Login Form Using HTML & CSS “
You might like this:
- Responsive Image Slider
- Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- How to Create Resume CV Website Using HTML CSS Bootstrap4
Animated Login Form Using HTML & CSS [Source Codes]
To create this Animated Login Form First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Animated Login Form Using HTML & CSS from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!DOCTYPE html>
<html lang="en">
<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>
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="login">
</form>
</body>
</html># CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
/* # ⚙️ Technology Used
1. HTML5
2. CSS3
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟 to this 👆 Repository */
/************************************************/
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type ="text"],.box input[type ="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type ="text"]:focus,.box input[type ="password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
/* COPYRIGHT- CODING WITH NICK*/
That’s all, now you’ve successfully created a Animated Login Form Using HTML & CSS . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
