How to Make a Transparent Login Form in HTML with CSS Source Code

transparent login form in html with css source code
transparent login form in html with css source code
Hi, in this post I 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 Source Code of the login and registration form with toggle options using jQuery.
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

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 sign up 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 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 sign up form in HTML CSS with source code?

How do I Make a Transparent Login and Registration Form in HTML?

 

To create the login and registration page with glass effects using HTML CSS, we will cover the following points.

  1. Create index.html, style.css and javascript files.
  2. Create a sign up form using HTML and CSS.
  3. Make a hidden login form in HTML CSS.
  4. Add jQuery CDN link in the head section oh HTML
  5. Add body background image in HTML form
  6. Make the registration form transparent using CSS
  7. 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 pate the following source code of 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 button click. We have used the jQuery hide( ) and show ( ) function.

/* 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.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

5 Responses

  1. I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are amazing! Thanks!

  2. Aw, this was an extremely good post. Spending some time and actual effort to produce
    a very good article… but what can I say… I hesitate a whole lot and don’t
    manage to get anything done.

Leave a Reply

Your email address will not be published.