Amazing Transparent Login Form using HTML CSS & Javascript

Amazing Transaprent Login Form using HTML CSS and Javascript

Hello readers, Today in this blog you'll learn how to create an Amazing Transparent Login Form using HTML CSS and Javascript. Previously I have shared a Responsive Dropdown Menu Bar using HTML & CSS only, now it's time to create an Amazing Transparent Login Form Design.

A login form is a set of credentials used to authenticate a user. A Login form is used to enter the authentication credentials of the user to access a restricted page or form. The login form carries a field for the username and another for the password.

As you can see in the image, this is a cool Transparent Login Form. Javascript is only used to show and hide passwords when the user clicks. In the image form, there is an image, a form, some texts, and some social media icons. You can change this form according to your requirements if you have basic knowledge of HTML CSS.

This is a Login Form that has no backend unification. You can use PHP language to work this form in the backend. If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Amazing Transparent Login Form).

Video Tutorial of a Transparent Login Form in HTML CSS

I hope after watching this video you've understood the basic codes, concepts of this Login Form. You can switch the position of form and image very easily, you need to change some values or change the class name. If you like this login form and want to get the source codes of this form. You can easily get from the link which is given below.

If you like this program (Amazing Transparent Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

To create this program (Amazing Transparent Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Transparent Login Form UI</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="bg-img">
      <div class="content">
        <header>Login Form</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
<div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>
<div class="pass">
            <a href="#">Forgot Password?</a>
          </div>
<div class="field">
            <input type="submit" value="LOGIN">
          </div>
</form>
<div class="login">
Or login with</div>
<div class="links">
          <div class="facebook">
            <i class="fab fa-facebook-f"><span>Facebook</span></i>
          </div>
<div class="instagram">
            <i class="fab fa-instagram"><span>Instagram</span></i>
          </div>
</div>
<div class="signup">
Don't have account?
          <a href="#">Signup Now</a>
        </div>
</div>
</div>
<script>
      const pass_field = document.querySelector('.pass-key');
      const showBtn = document.querySelector('.show');
      showBtn.addEventListener('click', function(){
       if(pass_field.type === "password"){
         pass_field.type = "text";
         showBtn.textContent = "HIDE";
         showBtn.style.color = "#3498db";
       }else{
         pass_field.type = "password";
         showBtn.textContent = "SHOW";
         showBtn.style.color = "#222";
       }
      });
    </script>
  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
.bg-img{
  background: url('bg.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.7);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.04);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
.links{
  display: flex;
  cursor: pointer;
  color: white;
  margin: 0 0 20px 0;
}
.facebook,.instagram{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: 10px;
}
.facebook{
  margin-left: 0;
  background: #4267B2;
  border: 1px solid #3e61a8;
}
.instagram{
  background: #E1306C;
  border: 1px solid #df2060;
}
.facebook:hover{
  background: #3e61a8;
}
.instagram:hover{
  background: #df2060;
}
.links i{
  font-size: 17px;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

Thanks for visiting, Keep visiting.

18 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

UnknownApril 25, 2020 at 9:37 PM
wow you are great bro. can we meet up after corona
TeslasincMay 3, 2020 at 8:53 PM
Wow, the picture looks blur how do you do thatfrom design or css,
UNIXWAREJuly 10, 2020 at 11:34 AM
wow really awsome genius !
how old are you?
UnknownAugust 28, 2020 at 12:06 PM
unable to insert background images in login page
Saadani Mohamed AmineNovember 25, 2020 at 2:59 PM
Coding Nepal,really you do great work and impresive efforts.It helps me a lot.
Thanks.
UnknownDecember 16, 2020 at 9:55 PM
I'm probably just dumb for not understanding, but how do you make this recognize accounts and create accounts? (Also everything else is awesome!)
PSSJanuary 18, 2021 at 11:25 AM
thank u so much. How the facebook & instagram signup works? it doesnt work tho
KarthikeyaFebruary 5, 2021 at 7:18 PM
IN A PAGE OF BLOGGER WHERE TO PASTE CSS FILE AND HTML FILE CAN U PLEASE TELL OR MAKE A DEMO VIDEO BRO
KarthikeyaFebruary 5, 2021 at 7:23 PM
How to add wallpaper to login script in blogger
KarthikeyaFebruary 5, 2021 at 7:32 PM
how to add sign up page also bro

Video Tutorial of a Transparent Login Form in HTML CSS

You might like this:

Thanks for visiting, Keep visiting.

18 Comments

Post a Comment

About Us

Contact Form