How Do You Make a Transparent Login Page in HTML and CSS?
In this article, I will show you How to Make a Transparent Login Form in HTML with CSS Source Code and you will also learn to create a signup form with On click show hide login form using jQuery. Learn to make a registration page with glass effects using HTML CSS and jQuery.
How to Make a Transparent Login Form in HTML CSS with Source Code?
First of all, we will create an amazing transparent sign-up and login form using HTML and CSS. Then we will use jQuery code to show or hide the login and registration form on button clicking. Moreover, you will get the login and registration form on the same page with toggle options using jQuery.
To create a login and registration form with the Show/Hide option in jQuery, we will use the jQuery latest CDN link. This registration form is responsive and I will show you how to make a transparent login form in HTML CSS with source code.
How do I Make a Transparent Login Form in HTML?
To create the Transparent Login Form in HTML and registration page with glass effects using HTML CSS, we will cover the following points.
- Create index.html, style.css, and javascript files.
- Create a sign-up form using HTML and CSS.
- Make a hidden login form in HTML CSS.
- Add jQuery CDN link in the head section of the HTML
- Add body background image in HTML form
- Make the registration form transparent using CSS
- Make show or hide login and sign-up forms using JQuery
You can watch the following video tutorial for step by step live process to create a responsive login form using HTML and CSS with the Show and Hide options using jQuery.
Now, I will provide you the complete source code of the login and registration form in HTML CSS with transparent glass effects.
HTML Source Code – Transparent Registration Form
Create an HTML form and paste the following source code of the transparent signup and login form. This includes the code for both login and registration forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- jQuery CDN Link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Transparent form</title>
</head>
<body>
<div class="container">
<div class="form">
<div class="btn">
<button class="signUpBtn">SIGN UP</button>
<button class="loginBtn">LOG IN</button>
</div>
<form class="signUp" action="" method="get">
<div class="formGroup">
<input type="text" id="userName" placeholder="User Name" autocomplete="off">
</div>
<div class="formGroup">
<input type="email" placeholder="Email ID" name="email" required autocomplete="off">
</div>
<div class="formGroup">
<input type="password" id="password" placeholder="Password" required autocomplete="off">
</div>
<div class="formGroup">
<input type="password" id="confirmPassword" placeholder="Confirm Password" required autocomplete="off">
</div>
<div class="checkBox">
<input type="checkbox" name="checkbox" id="checkbox">
<span class="text">I agree with term & conditions</span>
</div>
<div class="formGroup">
<button type="button" class="btn2">REGISTER</button>
</div>
</form>
<!------ Login Form -------- -->
<form class="login" action="" method="get">
<div class="formGroup">
<input type="email" placeholder="Email ID" name="email" required autocomplete="off">
</div>
<div class="formGroup">
<input type="password" id="password" placeholder="Password" required autocomplete="off">
</div>
<div class="checkBox">
<input type="checkbox" name="checkbox" id="checkbox">
<span class="text">Keep me signed in on this device</span>
</div>
<div class="formGroup">
<button type="button" class="btn2">REGISTER</button>
</div>
</form>
</div>
</div>
<script src="jQuery.js"></script>
</body>
</html>
CSS Source Code – Registration Page with Glass Effects
Following is the CSS source code for the transparent registration page with glass effects.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
background-image: url(https://www.hmablogs.com/wp-content/uploads/2021/09/background.jpg);
background-size: cover;
background-attachment: fixed;
}
/* align items center vertically and horizontally */
.container{
display: flex;
justify-content: center;
align-items:center !important;
height: 100vh;
}
.form{
width: 350px;
height: 450px;
background-color: rgba(41, 39, 39, 0.3);
box-shadow: 0 5px 30px black;
}
.btn button {
padding: 3px;
margin: 30px 0px 40px 30px;
border-style: none;
background-color: transparent;
color: beige;
font-size: 18px;
font-weight: 550;
}
.formGroup{
display: flex;
justify-content: center;
}
.formGroup input{
border: none;
width: 80%;
border-bottom: 2px solid white;
padding: 10px;
margin-bottom: 20px;
font-size: 14px;
font-weight: bold;
background-color: transparent;
color: white;
}
input:focus {
outline: none !important;
border-bottom: 2px solid rgb(91, 243, 131);
font-size: 17px;
font-weight: bold;
color: white;
}
::placeholder {
color: white;
}
.checkBox{
display: flex;
justify-content: center;
margin: 16px!important;
}
#checkbox{
margin-right: 10px;
height: 15px;
width: 15px;
}
.text{
color: rgb(199, 197, 197);
font-size: 13px;
}
.btn2{
padding: 10px;
width: 150px;
border-radius: 20px;
background-color: rgb(10, 136, 43);
border-style: none;
color: white;
font-weight: 600;
}
.btn2:hover{
background-color: rgba(10, 136, 43, 0.5);
}
.btn button:hover{
border-bottom: 2px solid rgb(91, 243, 131);
}
/* hide signup form */
.login{
display: none;
}
/* Login form code */
.login{
margin-top: 40px;
}
.login .checkBox{
margin-top: 30px !important;
}
jQuery Source Code – Make Hide Show Form with jQuery
The following is the jQuery source to make the transparent registration form hide and show on the button click. We have used the jQuery hide( ) and show ( ) functions.
/* Show login form on button click */
$('.loginBtn').click(function(){
$('.login').show();
$('.signUp').hide();
/* border bottom on button click */
$('.loginBtn').css({'border-bottom' : '2px solid #ff4141'});
/* remove border after click */
$('.signUpBtn').css({'border-style' : 'none'});
});
/* Show sign Up form on button click */
$('.signUpBtn').click(function(){
$('.login').hide();
$('.signUp').show();
/* border bottom on button click */
$('.signUpBtn').css({'border-bottom' : '2px solid #ff4141'});
/* remove border after click */
$('.loginBtn').css({'border-style' : 'none'});
});
If you found this tutorial helpful please subscribe to my YouTube channel and write your valuable suggestion in the comments section below.
