- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
Best Login Form or Page using HTML & CSS With Source Code
Hello, Today in this blog I'm going to create an Animated Login Form by using HTML & CSS only. In my earlier blog, I have Shared How To Create Animated Panda Login Page using HTML & JS now it's time to design a new login form with social media buttons.
What should a login page have?
There are many things that we can add to the login form, some of the important fields I have added to this best login form using HTML are given below:
- Username field.
- Email field.
- Phone number field.
- Password field.
- Forgot the password link.
- Submit button.
- Show password/hide option.
- Alternative login options (Facebook, Twitter, Gmail)
Animated Login Form or Page using HTML & CSS with Free Source Code
To copy - paste the following source codes of the HTML & CSS to your html & css file, first of all, you need to create two files. One is an HTML file And another is a CSS file, after creating these two files then you can copy-paste the following source codes of this best Animated Login Form Design in your file. You can also download all source code files from the given "Download Button" directly.HTML
To copy, the following HTML codes, create a file with the name asindex.html
& Paste these below HTML copied code to your index.html file.
<!DOCTYPE html>
<!-- Created By Codegyan - www.codegyan.in -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Responsive Login Form | Codegyan </title>--->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<form action="#">
<div class="title">Login</div>
<div class="input-box underline">
<input type="text" placeholder="Enter Your Email" required>
<div class="underline"></div>
</div>
<div class="input-box">
<input type="password" placeholder="Enter Your Password" required>
<div class="underline"></div>
</div>
<div class="input-box button">
<input type="submit" name="" value="Continue">
</div>
</form>
<div class="option">or Connect With Social Media</div>
<div class="twitter">
<a href="#"><i class="fab fa-twitter"></i>Sign in With Twitter</a>
</div>
<div class="facebook">
<a href="#"><i class="fab fa-facebook-f"></i>Sign in With Facebook</a>
</div>
</div>
</body>
</html>
CSS
To copy, the following CSS codes, create a file with the name asstyle.css
& Paste these below CSS copied code to your style.css file.
/* CSS code by Codegyan Pvt. Ltd.
* website : www.codegyan.in
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
html, body{
display: grid;
height: 100vh;
width: 100%;
place-items: center;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}
::selection{
background: #ff80bf;
}
.container{
background: #fff;
max-width: 350px;
width: 100%;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.container form .title{
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
.container form .title:before{
content: '';
position: absolute;
height: 4px;
width: 33px;
left: 0px;
bottom: 3px;
border-radius: 5px;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}
.container form .input-box{
width: 100%;
height: 45px;
margin-top: 25px;
position: relative;
}
.container form .input-box input{
width: 100%;
height: 100%;
outline: none;
font-size: 16px;
border: none;
}
.container form .underline::before{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: #ccc;
left: 0;
bottom: 0;
}
.container form .underline::after{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
}
.container form .input-box input:focus ~ .underline::after,
.container form .input-box input:valid ~ .underline::after{
transform: scaleX(1);
transform-origin: left;
}
.container form .button{
margin: 40px 0 20px 0;
}
.container .input-box input[type="submit"]{
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
font-size: 17px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.container .input-box input[type="submit"]:hover{
letter-spacing: 1px;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container .option{
font-size: 14px;
text-align: center;
}
.container .facebook a,
.container .twitter a{
display: block;
height: 45px;
width: 100%;
font-size: 15px;
text-decoration: none;
padding-left: 20px;
line-height: 45px;
color: #fff;
border-radius: 5px;
transition: all 0.3s ease;
}
.container .facebook i,
.container .twitter i{
padding-right: 12px;
font-size: 20px;
}
.container .twitter a{
background: linear-gradient(to right, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .twitter a:hover{
background: linear-gradient(to left, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .facebook a{
background: linear-gradient( to right, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
.container .facebook a:hover{
background: linear-gradient( to left, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
If you wann to check the demo of this code, then you can check using below demo button.
Click on the following download button to download all source code files of login form directly on your computer.
- Related Questions & Answers
- Build a Dictionary App in HTML CSS & JavaScript
- Create Minion Eyes Toggle using Pure CSS
- Create A Todo List App in HTML CSS & JavaScript
- How to create accordion on blogger using HTML & JavaScript ?
- How To Create New Year Countdown using HTML & Javascript
- How to Build Weather App using HTML CSS & JavaScript
- Slicing Design Newsletter Subcribe Modal
- How to create Multi Tags Input Box in HTML CSS & JavaScript
- How to create a Facebook Post Box in HTML CSS & JavaScript
- How to Create Text To Speech Converter in HTML & JavaScript
- Best Login Form or Page using HTML & CSS With Source Code
- Create OTP Code Verification Form in HTML CSS & JavaScript
- Create Beautiful Login Page Using HTML and JS
- Preview Image Before Upload Using JavaScript
- Which is default HTML5 skeleton ?
- How to echo HTML in PHP ?
Advertisements
ads