Sliding Login & Sign Up Form Design With CSS & JS

Hello, learning frontend developers! On this page, we are going to make a Sliding Login & Sign Upp Form With HTML, CSS & JS

And understand all the concepts that will help you to make this sliding login & sign-up form. Understanding these concepts can help you to create more cool projects like this one.

Also Read: Glassmorphism Login Page With HTML & CSS

At the end of this post, I will provide the whole HTML, CSS & JS code that you can copy and paste to run this project into your application.

Key Concepts Used To Make Sliding Login & Sign Up Form:

• CSS Transitions & Timing
• CSS Box Shadow
• CSS Flexbox
• Media Queries & Pseudo-classes

Understanding The HTML For Making Sliding Login & Sign Up Form

1. Body Container

• We start with a div element that has a class of body. This div serves as a container for our entire login/register form.

   <div class="body">

2. Veen Container

• Inside the body container, we have another div with a class of veen. This div contains the entire login/register form.

   <div class="veen">

3. Login and Register Buttons

• Within the veen container, we have two sets of buttons for login and registration, each wrapped in a div with classes login-btn and rgstr-btn.

   <div class="login-btn splits">
     <!-- Login button -->
     <button class="active">Login</button>
   </div>
   <div class="rgstr-btn splits">
     <!-- Register button -->
     <button>Register</button>
   </div>

4. Wrapper Div

• Next, we have a div with the class wrapper. This div contains two forms, one for login and one for registration.

   <div class="wrapper">

5. Login Form

• Inside the wrapper div, we have a form with the id login for the login functionality. It contains input fields for email/username and password.

   <form id="login" tabindex="500">
     <!-- Login form elements -->
   </form>

6. Registration Form

• Similarly, we have another form with the id register for registration. It contains input fields for full name, email, username, and password.

   <form id="register" tabindex="502">
     <!-- Registration form elements -->
   </form>

Understanding CSS To Built Sliding Login & Sign Up Form

1. Global Styles

• We set some global styles for the body container, background color, and layout adjustments.

   .body {
     background: #ff4931;
     transition: all .5s;
     padding: 1px;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
   }

2. Veen Container Styles

• The .veen class styles the container for the login/register form, setting its width, margin, and background color, and adding a box shadow for depth.

   .veen {
     width: 70%;
     margin: 100px auto;
     background: rgba(255,255,255,.5);
     min-height: 400px;
     display: table;
     position: relative;
     box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
   }

3. Button Styles

• Buttons inside the .veen container is styled with a transparent background, white border, padding, border radius, and transition effects.

   .veen button {
     background: transparent;
     display: inline-block;
     padding: 10px 30px;
     border: 3px solid #fff;
     border-radius: 50px;
     background-clip: padding-box;
     position: relative;
     color: #FFF;
     transition: all .25s;
   }

4. Active Button Styles

• Styles for the active button, changing the border color and background color.

   .veen button.dark {
     border-color: #ff4931;
     background: #ff4931;
   }

5. Wrapper Styles

• The .wrapper class styles the container for the forms, adjusting its position, width, height, background color, and adding a box shadow.

   .veen > .wrapper {
     position: absolute;
     width: 40%;
     height: 120%;
     top: -10%;
     left: 5%;
     background: #fff;
     box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
     transition: all .5s;
     color: #303030;
     overflow: hidden;
   }

Understanding JQuery to Add Sliding Functionality In This Form

1. jQuery Script

• This script handles the button clicks for switching between the login and registration forms.

   $(document).ready(function(){
     // Switch to registration form
     $(".veen .rgstr-btn button").click(function(){
       $('.veen .wrapper').addClass('move');
       $('.body').css('background','#e0b722');
       $(".veen .login-btn button").removeClass('active');
       $(this).addClass('active');
     });

     // Switch to login form
     $(".veen .login-btn button").click(function(){
       $('.veen .wrapper').removeClass('move');
       $('.body').css('background','#ff4931');
       $(".veen .rgstr-btn button").removeClass('active');
       $(this).addClass('active');
     });
   });

• When we click on the register button it adds the class move to the wrapper that changes the background color of the body & sets the active state for the clicked button.
• Similarly, when the login button is clicked it removes the class move from the wrapper which resets the background color of the body & sets the active state for the clicked button.

Final Source Code Of Sliding Login & Sign Up Form

HTML:

<div class="body">
		<div class="veen">
			<div class="login-btn splits">
				<p>Already an user?</p>
				<button class="active">Login</button>
			</div>
			<div class="rgstr-btn splits">
				<p>Don't have an account?</p>
				<button>Register</button>
			</div>
			<div class="wrapper">
				<form id="login" tabindex="500">
					<h3>Login</h3>
					<div class="mail">
						<input type="mail" name="">
						<label>Mail or Username</label>
					</div>
					<div class="passwd">
						<input type="password" name="">
						<label>Password</label>
					</div>
					<div class="submit">
						<button class="dark">Login</button>
					</div>
				</form>
				<form id="register" tabindex="502">
					<h3>Register</h3>
					<div class="name">
						<input type="text" name="">
						<label>Full Name</label>
					</div>
					<div class="mail">
						<input type="mail" name="">
						<label>Mail</label>
					</div>
					<div class="uid">
						<input type="text" name="">
						<label>User Name</label>
					</div>
					<div class="passwd">
						<input type="password" name="">
						<label>Password</label>
					</div>
					<div class="submit">
						<button class="dark">Register</button>
					</div>
				</form>
			</div>
		</div>	
	</div>

Also Read: Animated Ribbon Login Page With HTML & CSS

CSS:

<style type="text/css">
		.site-link{
      padding: 5px 15px;
			position: fixed;
			z-index: 99999;
			background: #fff;
			box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
			right: 30px;
			bottom: 30px;
			border-radius: 10px;
		}
		.site-link img{
			width: 30px;
			height: 30px;
		}
	</style>
    <style>

.body{
			background: #ff4931;
			transition: all .5s;
			padding: 1px;
      min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
		}
		.veen{
			width: 70%;
			margin: 100px auto;
			background: rgba(255,255,255,.5);
			min-height: 400px;
			display:table;
			position: relative;
			box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
		}
		.veen > div {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			color: #fff;
		}
		.veen button{
			background: transparent;
			//background-image: linear-gradient(90deg, #e0b722, #ff4931);
			display: inline-block;
			padding: 10px 30px;
			border: 3px solid #fff;
			border-radius: 50px;
			background-clip: padding-box;
			position: relative;
			color: #FFF;
			//box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
			transition: all .25s;
		}
		.veen button.dark{
			border-color: #ff4931;
			background: #ff4931;
		}
		.veen .move button.dark{
			border-color: #e0b722;
			background: #e0b722;
		}
		.veen .splits p{
			font-size: 18px;
		}
		.veen button:active{
			box-shadow: none;			
		}
		.veen button:focus{
			outline: none;			
		}
		.veen > .wrapper {
			position: absolute;
			width: 40%;
			height: 120%;
			top: -10%;
			left: 5%;
			background: #fff;
			box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
			transition: all .5s;
			color: #303030;
			overflow: hidden;
		}
		.veen .wrapper > form{
			padding: 15px 30px 30px;
			width: 100%;
			transition: all .5s;
			background: #fff;
			width: 100%; 
		}
.veen .wrapper > form:focus{
  outline: none;
}
		.veen .wrapper #login{
			padding-top: 20%;
      visibility: visible;
		}
		.veen .wrapper #register{
			transform: translateY(-80%) translateX(100%);
      visibility: hidden;
		}
		.veen .wrapper.move #register{
			transform: translateY(-80%) translateX(0%);
      visibility: visible;
		}
		.veen .wrapper.move #login{
			transform: translateX(-100%);
      visibility: hidden;
		}
		.veen .wrapper > form > div {
			position: relative;
			margin-bottom: 15px;
		}
		.veen .wrapper label{
			position: absolute;
			top: -7px;
			font-size: 12px;
			white-space: nowrap;
			background: #fff;
			text-align: left;
			left: 15px;
			padding: 0 5px;
			color: #999;
			pointer-events: none;
		}
		.veen .wrapper h3{
			margin-bottom: 25px;
		}
		.veen .wrapper input{
			height: 40px;
			padding: 5px 15px;
			width: 100%;
			border: solid 1px #999;
		}
.veen .wrapper input{
			height: 40px
			padding: 5px 15px;
			width: 100%;
			border: solid 1px #999;
		}
		.veen .wrapper input:focus{
			outline: none;
			border-color: #ff4931;
		}
		.veen > .wrapper.move{
			left: 45%;
		}
		.veen > .wrapper.move input:focus{
			border-color: #e0b722;
		}
		@media (max-width: 767px){
			.veen{
				padding: 5px;
				margin: 0;
				width: 100%;
				display: block;
			}
			.veen > .wrapper{
				position: relative;
				height: auto;
				top: 0;
				left: 0;
				width: 100%;
			}
			.veen > div{
				display: inline-block;
			}
			.splits{
				width: 50%;
				background: #fff;
				float: left;
			}
			.splits button{
				width: 100%;
				border-radius: 0;
				background: #505050; 
				border: 0;
				opacity: .7;
			}
			.splits button.active{
				opacity: 1;
			}
			.splits button.active{
				opacity: 1;
				background: #ff4931;
			}
			.splits.rgstr-btn button.active{
				background: #e0b722;
			}
			.splits p{
				display: none;
			}
			.veen > .wrapper.move{
				left: 0%;
			}
		}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  box-shadow: inset 0 0 0 50px #fff
}
    </style>

JQuery:

 <script>
        $(document).ready(function(){
			$(".veen .rgstr-btn button").click(function(){
				$('.veen .wrapper').addClass('move');
				$('.body').css('background','#e0b722');
				$(".veen .login-btn button").removeClass('active');
				$(this).addClass('active');

			});
			$(".veen .login-btn button").click(function(){
				$('.veen .wrapper').removeClass('move');
				$('.body').css('background','#ff4931');
				$(".veen .rgstr-btn button").removeClass('active');
				$(this).addClass('active');
			});
		});
    </script>

About Author