How to create a simple and Beautiful Html login form design
Html Design Form:-
An HTML form is the main source of every document that stores information of users on a webserver using to interact controls on the login page and interact fully.
Html form contains information like username, password, mobile number, email id, gender...etc.,
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>form</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/css/Login-Form-Clean.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="login-clean">
<form action="" method="post">
<h2 class="sr-only">Login Form</h2>
<div class="illustration">
<i class="icon ion-ios-navigate"></i>
</div>
<div class="form-group">
<input class="form-control" type="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<a href="" class="button-col">Log In
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<p style="text-align: center;">or</p>
<a class="forgot" href="#">Forgot your email or password?</a>
</form>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
HTML Forms code:-
First of all, you have to create three things:-
1.Text field in HTML Forms:
2.Password Field in HTML Forms:
3.Text area, Radio button, checkbox, DropDown or Submit Button.
.login-clean .illustration
{
color:#262c37;
}
.forgot
{
margin-top:20px;
font-size:14px !important;
}
.forgot:hover
{
color:#2894ff !important;
}
.button-col
{
font-family:sans-serif;
position:relative;
display:inline-block;
padding:10px 85px;
text-decoration: none;
color:#2894ff;
background:#262c37;
font-size:16px;
left:5px;
margin:10px;
}
.button-col:hover
{
text-decoration: none;
background:#2894ff;
color:#1f242d;
transition:0.5s;
transition-delay:0.5s;
}
.button-col span
{
position:absolute;
display:block;
background:#2894ff;
}
.button-col span:nth-child(1)
{
left:0;
bottom:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:top:
transition:transform 0.25s;
}
.button-col:hover span:nth-child(1)
{
transform:scaleY(1);
transform-origin:bottom:
transition:transform 0.25s;
}
.button-col span:nth-child(2)
{
left:0;
top:0;
width:100%;
height:2px;
transform:scaleX(0);
transform-origin:right:
transition:transform 0.25s;
transition-delay:0.25s;
}
.button-col:hover span:nth-child(2)
{
transform:scaleX(1);
transform-origin:left:
transition:transform 0.25s;
transition-delay:0.25s;
}
.button-col span:nth-child(3)
{
right:0;
bottom:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:bottom:
transition:transform 0.25s;
transition-delay:0.5s;
}
.button-col:hover span:nth-child(3)
{
transform:scaleY(1);
transform-origin:top:
transition:transform 0.25s;
transition-delay:0.5s;
}
.button-col span:nth-child(4)
{
left:0;
bottom:0;
width:2px;
height:100%;
transform:scaleX(0);
transform-origin:left:
transition:transform 0.25s;
transition-delay:0.75s;
}
.button-col:hover span:nth-child(4)
{
transform:scaleX(1);
transform-origin:right:
transition:transform 0.25s;
transition-delay:0.75s;
}