3.3K
Toggle Login and Signup Form Using HTML and CSS
Hello, guys welcome back again techmidpoint tutorial. In this tutorial, I am going to show how to make a Toggle Login and Signup Form with HTML, CSS, and jquery. We can create easily a Login form and signUp form in a single interface. When you click login form then the signUp interface will hide and again you click to the create an account option then the login interface will hide with toggle effect.
Toggle Login and Signup Form
HTML & jQuery
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Toggle Login and SignUp Form with HTML,CSS and jquery</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name"/>
<input type="password" placeholder="Password"/>
<input type="password" placeholder="Comform Password"/>
<input type="text" placeholder="Email Address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Login Here</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>
<script>
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>
</body>
</html>
CSS
body{
font-family:arial;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
background: rgb(195, 203, 212);
}
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #333366;
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);
border-radius: 20px;
}
.form input {
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
font-weight: bold;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 15px;
}
.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;
}
For More Tutorials Please Click Here
