Best top Ten(10) Login Design Ready Source Code will be found in this blog. Mast Design 10 Login Form Different Style Mother Will Get With Source Code Only HTML, CSS, and JavaScript for that.
Top 10 Login Design Ready Source Code
Top 10 Login Design Ready Source Code is explained below step by step you watch and learn you will understand very well.
1.Login Form with Sign Up Form
Make login form with sign up form on one page
To Create a Login Form with a sign-up form on one page using HTML CSS and JavaScript we will create a login form in which a sign-up Form will also be added.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!------Create Code Myprograming.html------>
<title>Login Form with Sign Up Form</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!--------Jquery CDN link--------->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<h1 style="text-align: center;">Login Form with Sign Up Form</h1>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
<!--------Js link--------->
<script src="demo.js"></script>
</body>
</html>Step2:- Create style.css File.
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: lightblue;
width: 100%;
border: 0;
padding: 15px;
color: #000;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: lightblue;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}Step3:- Create demo.js File.
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});Note:- Also add style.css and demo.js link in index.html File.
2. Login Form With Triangle Border
To Create a Login Form with a triangle border (arrow border) we use border: 12px solid transparent; Will use the below source code ‘hey o see you will get the idea of how to make an arrow border.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!------Create Code Myprograming.html------>
<title>Login Form With Triangle Border</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align: center;">Login Form </h1>
<div class="login">
<div class="login-triangle"></div>
<h2 class="login-header">Log in</h2>
<form class="login-container">
<p><input type="email" placeholder="Email"></p>
<p><input type="password" placeholder="Password"></p>
<p><input type="submit" value="Log in"></p>
</form>
</div>
</body>
</html>Step2:- Create style.css File.
/* 'Open Sans' font from Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: lightblue;
font-family: 'Open Sans', sans-serif;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
/* The triangle form is achieved by a CSS hack */
.login-triangle {
width: 0;
margin-right: auto;
margin-left: auto;
border: 12px solid transparent;
border-bottom-color:blue;
}
.login-header {
background: blue;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.login-container {
background:cyan;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}Note:- Add style.css link in index.html File also.
3. Responsive Login Form Without Framework
To create a responsive login form without a framework we have to use a media query which you will see in the below example inside CSS we can create a responsive design without a framework also we can make the responsive design by using a media query.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Responsive Login Form Without Framework</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align: center;">Login Form </h1>
<h2> Responsive Login Form Without Framework</h2>
<div class="main">
<div class="form">
<form action="">
<h1>Login Form</h1>
<input type="text"
class="user"
placeholder="Username"/>
<input type="password"
class="pass"
placeholder="Password"/>
<button class="login">Login</button>
</form>
</div>
</div>
</body>
</html>Step2:- Create style.css File.
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body{ background: lightblue; }
.main{
position: relative;
width: 25%;
height: 400px;
padding: 10px 25px;
margin: 10vh auto;
background: #fff;
border-radius: 8px;
}
.form{ width: 100%; height: 100%; }
h1, h2, .user, .pass{
text-align: center;
display: block;
}
h1{
color: #000;
font-weight: bold;
font-size: 40px;
margin: 30px auto;
}
.user, .pass, .login{
width: 100%;
height: 45px;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: lighter;
margin-bottom: 30px;
}
.user, .pass{ background: #ecf0f1; }
.login{
color: #fff;
cursor: pointer;
margin-top: 20px;
background: #3598dc;
transition: background 0.4s ease;
}
.login:hover{ background: #3570dc; }
@media only screen and (min-width : 280px) {
.main{ width: 90% }
}
@media only screen and (min-width : 480px) {
.main{ width: 60% }
}
@media only screen and (min-width : 768px) {
.main{ width: 40% }
}
@media only screen and (min-width : 992px) {
.main{ width: 30% }
}
h2{ color: #fff; margin-top: 25px; }
4. Gradient Background Login Form
To Create a Gradient Background Login Form, we have to use the property of CSS gradient Background that will create our Gradient Background Login Form.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Gradient Background Login Form</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="text" name="u" placeholder="Username" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button type="submit" class="btn btn-primary btn-block btn-large">SUBMIT</button>
</form>
</div>
</body>
</html>Step2:- Create style.css File.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block;
*display: inline;
*zoom: 1;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:hidden; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#606c88+0,606c88+0,606c88+3,aae4ef+51,aae4ef+51,606c88+100,3f4c6b+100 */
background: #606c88; /* Old browsers */
background: linear-gradient(135deg, #606c88 0%,#606c88 0%,#606c88 3%,#aae4ef 51%,#aae4ef 51%,#606c88 100%,#3f4c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
input {
width: 100%;
margin-bottom: 10px;
background: rgb(239 130 190 / 30%);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgb(100 100 100 / 20%), 0 1px 1px rgb(255 255 255 / 20%);
transition: box-shadow .5s ease;
}
* {
box-sizing: border-box;
}5. Create Login Form With a Screen Background Shape
To create a Login Form with a screen Background Shape we have to take span tag inside a div and give it a different style and use linear-gradient on you will see in style.css.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Login Form With Create Screen Background Shape</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<h1 style="text-align: center;">Login Form With Create Screen Background Shape</h1>
<div class="container">
<div class="screen">
<div class="screen__content">
<form class="login">
<div class="login__field">
<i class="login__icon fas fa-user"></i>
<input type="text" class="login__input" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock"></i>
<input type="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</form>
<div class="social-login">
<h3>log in With</h3>
<div class="social-icons">
<a href="#" class="social-login__icon fab fa-instagram"></a>
<a href="#" class="social-login__icon fab fa-facebook"></a>
<a href="#" class="social-login__icon fab fa-google"></a>
</div>
</div>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>
</body>
</html>Step2:- Create style.css File.
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}
body {
background:lightblue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.screen {
background: linear-gradient(90deg, #5D54A4, #7C78B8);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 24px #5C5696;
}
.screen__content {
z-index: 1;
position: relative;
height: 100%;
}
.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}
.screen__background__shape1 {
height: 520px;
width: 520px;
background: #FFF;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}
.screen__background__shape2 {
height: 220px;
width: 220px;
background: #6C63AC;
top: -172px;
right: 0;
border-radius: 32px;
}
.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #5D54A4, #6A679E);
top: -24px;
right: 0;
border-radius: 32px;
}
.screen__background__shape4 {
height: 400px;
width: 200px;
background: #7E7BB9;
top: 420px;
right: 50px;
border-radius: 60px;
}
.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}
.login__field {
padding: 20px 0px;
position: relative;
}
.login__icon {
position: absolute;
top: 30px;
color: #7875B5;
}
.login__input {
border: none;
border-bottom: 2px solid #D1D1D4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: .2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #6A679E;
}
.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4C489D;
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
}
.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #6A679E;
outline: none;
}
.button__icon {
font-size: 24px;
margin-left: auto;
color: #7875B5;
}
.social-login {
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #7875B5;
}
.social-login__icon:hover {
transform: scale(1.5);
}6. LOGIN FORM With Border Hover Animation
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>LOGIN FORM With Border Hover Animation</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<body>
<h1 style="text-align: center;">LOGIN FORM With Border Hover Animation</h1>
<form class="box" action="index.html" method="post">
<h1>Login Form</h1>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" value="Login">
</form>
</body>
</html>Step2:- Create style.css File.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: lightblue;
}
.box{
width: 300px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
border-radius: 20px 20px;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500*;
background: linear-gradient(
to right,
hsl(1 100% 50%),
hsl(100 100% 50%)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.box input[type = "text"],.box input[type = "password"]{
border:0;
background: none;
display: block;
margin: 5px auto;
text-align: center;
border: 2px solid #D4AC0D;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.5s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
border-color: #A04000;
width: 250px;
}
.box input[type = "text"]:hover,.box input[type = "password"]:hover{
border-color: #A04000;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #D4AC0D;
padding: 14px 40px;
outline: none;
color: white;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:focus{
border-color: #D4AC0D;
}
.box input[type = "submit"]:hover{
background: #D4AC0D;
border-radius: 24px;
}
a {
font-family: "Dank Mono", ui-monospace, monospace;
background: linear-gradient(
to right,
hsl(98 100% 62%),
hsl(204 100% 59%)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
7. Login Form With Background Image
To Create Login Form with Background image upload image in background and background of second div you take (background-color: rgba(0, 0, 0, 0.3);) will use this css property.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Login Form With Background Image</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<body>
<h1 style="text-align: center;">Login Form With Background Image</h1>
<div id="conteiner">
<form action="#" method="GET" id="form">
<p>Login Form</p>
<label for="email">Email</label><br>
<input type="text" id="email" name="email" required><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Step2:- Create style.css File.
body {
background-image:url('https://i.ibb.co/mb185pV/login-form-background.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
p {
text-align: center;
font-family: Helvetica;
font-size: 2.5rem;
font-weight: 900;
color: #FFFFFF;
text-shadow:
2px 2px 0 rgb(245, 140, 157),
2px -2px 0 rgb(245, 140, 157),
-2px 2px 0 rgb(245, 140, 157),
-2px -2px 0 rgb(245, 140, 157),
2px 0px 0 rgb(245, 140, 157),
0px 2px 0 rgb(245, 140, 157),
-2px 0px 0 rgb(245, 140, 157),
0px -2px 0 rgb(245, 140, 157);
}
form {
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
font-family: Helvetica;
font-size: 2rem;
font-weight: 900;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 30%;
line-height: 0.6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
border-radius: 5rem;
border: none;
padding: 10px;
}
.remember {
color: black;
font-size: 1.2rem;
font-weight: 900;
margin-right: 10rem;
}
#remember {
height: 15px;
width: 15px;
margin-top: -0.65rem;
}
button {
padding-left: 2.5rem;
padding-right: 2.5rem;
font-family: Helvetica;
font-size: 1.5rem;
font-weight: 900;
background-color: blue;
color: white;
margin-bottom: 2rem;
margin-top: 2rem;
}
8. Login Form With Social Icon
To Create Login Form with social icon, you have to add social icon and give some css style to it so that our login form looks more attractive.
Note:- Please add bootstrap link which is required to create this login form i provide all link just copy and paste it in your project.
Links:-
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito:600,700,900" rel="stylesheet">Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Login Form With Social Icon</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito:600,700,900" rel="stylesheet">
<body>
</head>
<body id="body">
<div id="login-card" class="card">
<div class="card-body">
<h2 class="text-center">Login Form</h2>
<br>
<form action="/action_page.php">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="email" placeholder="Enter password" name="pswd">
</div>
<button type="submit" id="button" class="btn btn-primary deep-purple btn-block ">Submit</button>
<br>
<br>
<div id="btn" class="text-center">
<button type="button" class="btn btn-primary btn-circle btn-sm"><i class="fab fa-facebook"></i></button>
<button type="button" class="btn btn-danger btn-circle btn-sm"><i class="fab fa-google"></i></button>
<button type="button" class="btn btn-info btn-circle btn-sm"><i class="fab fa-twitter"></i></button>
</div>
</form>
</div>
<div>
</body>
</html>
Step2:- Create style.css File.
#body {
font-family: 'Nunito';
background-color: lightblue;
}
#login-card{
width:350px;
border-radius: 25px;
margin:150px auto;
}
#email{
border-radius:30px;
background-color: #ebf0fc;
border-color: #ebf0fc;
color: #9da3b0;
}
#button{
border-radius:30px;
}
#btn{
position: absolute;
bottom: -35px;
padding: 5px;
margin: 0px 55px;
align-items: center;
border-radius: 5px;
}
#container{
margin-top:25px;
}
.btn-circle.btn-sm {
width: 40px;
height: 40px;
padding: 2px 0px;
border-radius: 25px;
font-size: 14px;
text-align: center;
margin: 8px;
}9. Login Form With Unique Design
To create Login Form with Unique Design we will use Flex Property so that you can create one side image and Login Form in other side this will make your design look more attractive how to use Flex Property o you will see in style.css you will know.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Login Form With Unique Design</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Niconne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Niconne&display=swap" rel="stylesheet">
<body>
<div class="container">
<div class="image">
<h1>Welcome To <span>MYPROGRAMING</span></h1>
</div>
<div class="content">
<h1>Login FOrm</h1>
<div class="form-group">
<label for="">UserName</label>
<br>
<input type="text" class="form-control" name="" id="txt" aria-describedby="helpId" placeholder="UserName">
</div>
<div class="form-group">
<label for="">Password</label>
<br>
<input type="password" class="form-control" name="" id="txt" placeholder="Password">
</div>
<a class="fp" href="index.html">Forgot Password?</a>
<br>
<button type="button" class="btn"><a href="index.html">Login</a></button>
</div>
</div>
</body>
</html>
Step2:- Create style.css File.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
background:lightblue;
}
.container {
height: 400px;
width: 650px;
box-shadow: 0px 30px 40px black;
display: flex;
border-radius: 10px;
}
.image {
flex: 50%;
background: url('https://i.ibb.co/mb185pV/login-form-background.jpg');
background-size: cover;
text-align: center;
color: #000;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.image h1 {
margin-top: 50%;
padding-left: 20px;
padding-right: 20px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.image span {
color: blue;
}
.content {
flex: 50%;
background-color: white;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.content h1 {
padding: 40px;
padding-top: 30px;
font-family: 'Niconne', cursive;
font-size: 40px;
color: #c446c9;
}
#txt {
margin: 10px;
padding: 5px;
border: none;
background-color: rgba(156, 77, 156, 0.3);
border-radius: 10px;
font-weight: bold;
font-size: small;
font-family: 'Montserrat', sans-serif;
color: #aa38a4;
}
label {
font-weight: bold;
font-size: small;
}
#txt:focus {
outline: none;
}
.fp {
text-decoration: none;
font-weight: bold;
font-size: small;
transition: 0.3s;
}
.fp:hover {
color: #c446c9;
}
button {
padding: 10px 40px;
margin-top: 20px;
border: none;
background: linear-gradient(to right, #4568DC, #B06AB3);
border-radius: 20px;
transition: 0.3s;
}
button:hover {
transform: scale(1.2);
}
button a {
text-decoration: none;
color: white;
}10. Login Form with Unique Design, Background Shape And Social Icons
For login Form with Unique Design, Background Shape and Social Icons, you have to see all the above forms so that you know what Background shape and social icon have been added, we can create different designs like this with the help of Background Shape.
Output:-
Step1:- Create index.html File.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!------Create Code Myprograming.html------>
<title>Login Form with Unique Design, Background Shape And Social Icons</title>
<!--------style css link--------->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fa fa icons -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<body>
<div class="container">
<div class="circleTop"></div>
<div class="content">
<h1>Login</h1>
<div class="form-group">
<label for="">Email</label>
<br>
<input type="email" class="form" name="" id="" aria-describedby="helpId" placeholder="">
</div>
<div class="form-group">
<label for="">Password</label>
<br>
<input type="password" class="form" name="" id="" placeholder="">
</div>
<p>
<a href="#"> Forgot Password?</a>
</p>
<div class="icons">
<a href="#"><i class="fab fa-google-plus-official" aria-hidden="true"></i>
</a>
<a href="#"><i class="fab fa-facebook-square" aria-hidden="true"></i>
</a>
<a href="#"><i class="fab fa-twitter-square" aria-hidden="true"></i>
</a>
</div>
<button type="button"><a href="#">Login</a></button>
</div>
<div class="circleBottom"></div>
</div>
</body>
</html>
Step2:- Create style.css File.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to right bottom,#ed98f0, #b242b6);
height: 100vh;
}
.container {
height: 600px;
width: 350px;
box-shadow: 0px 15px 30px rgb(22, 22, 22);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 20px;
background: linear-gradient(to right top, purple, rgb(187, 7, 142));
}
.circleTop {
height: 300px;
width: 300px;
border-radius: 50%;
background-color: white;
box-shadow: inset 0px 15px 25px rgb(104, 102, 102), 0px 5px 15px rgb(114, 113, 113);
margin-top: -120px;
margin-left: -50px;
}
.circleBottom {
height: 300px;
width: 500px;
border-radius: 50%;
background-color: white;
margin-top: 200px;
margin-left: 200px;
box-shadow: inset 0px 5px 15px rgb(90, 89, 89), 0px 5px 15px rgb(77, 75, 75);
}
.content {
height: 400px;
width: 250px;
float: right;
margin-top: -70px;
margin-right: 0px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background: linear-gradient(to right top, rgb(236, 23, 190), rgb(4, 238, 187));
box-shadow: 0px 5px 15px rgb(22, 21, 21);
color: white;
font-family: 'Raleway', sans-serif;
}
.content h1 {
margin-left: 10px;
padding: 20px;
color: white;
padding-bottom: 40px;
font-weight: lighter;
margin-top: 25px;
}
.form {
border-radius: 5px;
border: none;
margin-top: 5px;
padding: 8px;
margin-bottom: 10px;
background-color: rgba(221, 235, 240, 0.4);
color: rgb(145, 32, 145);
}
.form:focus {
outline: none;
/* border: 1px solid rgb(0, 225, 255); */
}
.form-group {
margin-left: 30px;
}
p {
margin-left: 30px;
margin-top: 10px;
font-size: small;
}
p a {
color: white;
text-decoration: none;
}
button {
margin-left: 50px;
margin-top: 50px;
padding: 10px 60px;
border: none;
border-radius: 20px;
background-color: white;
box-shadow: 0px 5px 10px grey;
}
button a {
text-decoration: none;
color: purple;
font-size: large;
}
.icons {
margin-left: 90px;
margin-top: 30px;
}
.icons i {
padding-right: 10px;
font-size: 25px;
transition: 0.3s;
}
.icons a {
text-decoration: none;
color: white;
}
.icons i:hover {
transform: scale(1.04);
color: rgb(219, 116, 214);
}
