Login Form HTML CSS – CodingNepal

Create A Glassmorphism Login Form in HTML and CSS

CodingNepal — Mon, 24 Jul 2023 08:30:58 +0000

You may have seen trendy Glassmorphism effects on login forms, cards, and various components on different websites. As a beginner web developer, have you ever thought about creating your own Login form with Glassmorphism effects?

If you’re unfamiliar, glassmorphism is a user interface design trend that creates the illusion of translucent and blurred glass surfaces. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this beginner-friendly blog post, I’ll guide you through the steps of creating a Glassmorphism Login Form in HTML and CSS only. Not only will you learn to create forms with a stunning glass-like effect, but you’ll also learn how to add an engaging floating-label animation.

Steps To Create Glassmorphism Login Form HTML & CSS

To create a Login Form with a glassmorphism effect and floating input label animation using HTML and CSS, follow these simple instructions step-by-step:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file. These codes include essential HTML elements such as forms, input, links, buttons, and others. For basic form validation, I’ve also included the “required” attribute for the input fields.





  
  
  Glassmorphism Login Form | CodingNepal
  


  
    
      Login
        
        
        Enter your email
      
      
        
        Enter your password
      
      
        
          
          Remember me
        
        Forgot password?
      
      
      
        Don't have an account? Register

Next, add the following CSS codes to your style.css file to style our login form, along with the glassmorphism effect and floating label animation. These lines of code include various CSS properties like blur, background, background image, etc. to achieve the desired Glassmorphism effect.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000;
  background-position: center;
  background-size: cover;
}

.wrapper {
  width: 400px;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}

.input-field {
  position: relative;
  border-bottom: 2px solid #ccc;
  margin: 15px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.15s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.8rem;
  top: 10px;
  transform: translateY(-120%);
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #fff;
}

#remember {
  accent-color: #fff;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
}

.wrapper a {
  color: #efefef;
  text-decoration: none;
}

.wrapper a:hover {
  text-decoration: underline;
}

button {
  background: #fff;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

button:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

Conclusion and Final Words

In conclusion, we explored step-by-step instructions on setting up your project folder, creating the HTML structure, and adding the CSS styles for the Glassmorphism effect and floating label animation. I believe that by following the steps in this post, you’ve successfully created your very own Glassmorphism Login Form.

Remember to experiment and customize your login form to add personal touches and make it even more beautiful. To continue improving your HTML and CSS skills, why not try recreating other login form designs available on this website?

If you encounter any problems while creating your Glassmorphism login form, you can download the source code files for this form project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Login Form Validation in HTML CSS & JavaScript

CodingNepal — Fri, 04 Jun 2021 08:35:15 +0000

Hey friends, today in this blog you’ll learn how to create a Login Form Validation with Shake Effect in HTML CSS & JavaScript. In the earlier blog, I’ve shared how to create Login & Registration Form using HTML & CSS and now it’s time to validate the login form using JavaScript.

Form Validation in HTML means to check that the user’s entered credential – Email, Username, Password is valid and correct or not. User will not get access to the restricted page until he/she entered a valid email and password. And, Shake Effect in this Login Form means when the user clicks on the login button without entering their email and password then the input boxes shake to inform the user that these fields can’t be blank.

In our Login Form Validation in HTML & JavaScript, as you can see on the image preview, there is a login form that holds login text, two input fields, a login button, etc. at first those login errors are not shown but when the user clicks on the login button without entering their email & password then there is appear these errors with shake effect.

Once the user starts entering their credentials in the input fields then these errors will automatically hide. If you are feeling difficulties with what I’m saying then you can watch a video tutorial of this Login Form Validation in HTML with Shake Effect.

Video Tutorial of Form Validation in HTML & JavaScript

In the video, you’ve clearly seen how this login form looks like and how it show an error when the user tries to log in without entering an email and password or without entering a valid email address. This login form is created only for design purposes so when you entered a valid email & password and click on the login button then these details won’t send or submit anywhere.

If you want to send these details anywhere and want to receive them using PHP then you’ve to put that PHP file URL inside the action attribute of the form tag. I’ve already shared a blog on how to create Login & Registration Form with Email Verification using PHP. If you want to make this form workable and dynamic then don’t forget to read the mentioned blog.

Form Validation in HTML & JavaScript [Source Codes]

To create this program [Form Validation in HTML & JavaScript]. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Form Validation in HTML from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.





  
  
  Login Form validation in HTML & CSS | CodingNepal
  
  


  
    Login Form
    
      
        
          
          
          
        
        Email can't be blank
      
      
        
          
          
          
        
        Password can't be blank
      
      Forgot password?
      
    
    Not yet member? Signup now

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5372F0;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.wrapper{
  width: 380px;
  padding: 40px 30px 50px 30px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 35px;
  font-weight: 600;
}
.wrapper form{
  margin: 40px 0;
}
form .field{
  width: 100%;
  margin-bottom: 20px;
}
form .field.shake{
  animation: shake 0.3s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    margin-left: 0px;
  }
  20%, 80%{
    margin-left: -12px;
  }
  40%, 60%{
    margin-left: 12px;
  }
}
form .field .input-area{
  height: 50px;
  width: 100%;
  position: relative;
}
form input{
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 45px;
  font-size: 18px;
  background: none;
  caret-color: #5372F0;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  border-bottom-width: 2px;
  transition: all 0.2s ease;
}
form .field input:focus,
form .field.valid input{
  border-color: #5372F0;
}
form .field.shake input,
form .field.error input{
  border-color: #dc3545;
}
.field .input-area i{
  position: absolute;
  top: 50%;
  font-size: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-area .icon{
  left: 15px;
  color: #bfbfbf;
  transition: color 0.2s ease;
}
.input-area .error-icon{
  right: 15px;
  color: #dc3545;
}
form input:focus ~ .icon,
form .field.valid .icon{
  color: #5372F0;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
  color: #bfbfbf;
}
form input::placeholder{
  color: #bfbfbf;
  font-size: 17px;
}
form .field .error-txt{
  color: #dc3545;
  text-align: left;
  margin-top: 5px;
}
form .field .error{
  display: none;
}
form .field.shake .error,
form .field.error .error{
  display: block;
}
form .pass-txt{
  text-align: left;
  margin-top: -10px;
}
.wrapper a{
  color: #5372F0;
  text-decoration: none;
}
.wrapper a:hover{
  text-decoration: underline;
}
form input[type="submit"]{
  height: 50px;
  margin-top: 30px;
  color: #fff;
  padding: 0;
  border: none;
  background: #5372F0;
  cursor: pointer;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
form input[type="submit"]:hover{
  background: #2c52ed;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const form = document.querySelector("form");
eField = form.querySelector(".email"),
eInput = eField.querySelector("input"),
pField = form.querySelector(".password"),
pInput = pField.querySelector("input");

form.onsubmit = (e)=>{
  e.preventDefault(); //preventing from form submitting
  //if email and password is blank then add shake class in it else call specified function
  (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
  (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();

  setTimeout(()=>{ //remove shake class after 500ms
    eField.classList.remove("shake");
    pField.classList.remove("shake");
  }, 500);

  eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
  pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup

  function checkEmail(){ //checkEmail function
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
    if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
      eField.classList.add("error");
      eField.classList.remove("valid");
      let errorTxt = eField.querySelector(".error-txt");
      //if email value is not empty then show please enter valid email else show Email can't be blank
      (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
    }else{ //if pattern matched then remove error and add valid class
      eField.classList.remove("error");
      eField.classList.add("valid");
    }
  }

  function checkPass(){ //checkPass function
    if(pInput.value == ""){ //if pass is empty then add error and remove valid class
      pField.classList.add("error");
      pField.classList.remove("valid");
    }else{ //if pass is empty then remove error and add valid class
      pField.classList.remove("error");
      pField.classList.add("valid");
    }
  }

  //if eField and pField doesn't contains error class that mean user filled details properly
  if(!eField.classList.contains("error") && !pField.classList.contains("error")){
    window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
  }
}

That’s all, now you’ve successfully created a Login Form Validation in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Login and Registration Form in HTML CSS & JavaScript

CodingNepal — Mon, 31 Aug 2020 17:24:00 +0000

Hey friends, today in this blog, you’ll learn how to create an Animated Login and Registration Form in HTML CSS & JavaScript. Earlier I shared many blogs on How to Create a Login Form using HTML & CSS but, I haven’t shared a particular blog related to Login and Registration Forms in HTML. So, it’s time to create this one.

In this Form (Login and Registration Form in HTML), on the webpage, there is a login form and two toggle buttons at the top of the form labeled Login and Signup as you can see in the preview image above.

When you click on the signup button, the login form smoothly slides from the right to the left side and shows you the signup form.

And again after clicking the login button, the signup form slide from the left to the right side and shows you the login form. In this form, the login and signup forms both are on the same page and it is done with a little bit of JavaScript codes.

If you’re feeling difficult to understand what I am saying, you can watch a full video tutorial of this form (Login and Registration Form in HTML).

Video Tutorial of Login and Registration Form in HTML

In the video, you have seen an animated Login and Registration Form that is created using HTML CSS & JavaScript. I hope you’ve understood the basic codes behind creating this form.

I used just a few lines of JavaScript codes to complete this form, so you can easily create this type of login and registration form in HTML even if you’re a beginner.

JavaScript is used only to slide the form on button click and the toggle tab that slides from login to signup text and signup to login text is wholly based on pure HTML & CSS with the help of HTML tag.

If you liked this login form and want to get source codes or files, you can get them from the bottom of this page.

Login and Registration Form in HTML [Source Codes]

To create this form (Login and Registration Form in HTML). First, you need to create two Files one HTML File and another one is CSS File. After completing these files paste the following codes into your file.

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.




   
      
      Login and Registration Form in HTML | CodingNepal
      
      
   
   
      
         
            
               Login Form
            
            
               Signup Form
            
         
         
            
               
               
               Login
               Signup
               
            
            
               
                  
                     
                  
                  
                     
                  
                  
                     Forgot password?
                  
                  
                     
                     
                  
                  
                     Not a member? Signup now

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
::selection{
  background: #fa4299;
  color: #fff;
}
.wrapper{
  overflow: hidden;
  max-width: 390px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
  display: flex;
  width: 200%;
}
.wrapper .title{
  width: 50%;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid lightgrey;
  border-radius: 5px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: #fff;
  cursor: default;
  user-select: none;
}
#signup:checked ~ label.login{
  color: #000;
}
#login:checked ~ label.signup{
  color: #000;
}
#login:checked ~ label.login{
  cursor: default;
  user-select: none;
}
.wrapper .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
}
.form-inner form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  border-bottom-width: 2px;
  font-size: 17px;
  transition: all 0.3s ease;
}
.form-inner form .field input:focus{
  border-color: #fc83bb;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #fa4299;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

That’s all, now you’ve successfully created a Login and Registration Form in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Cool Login Form in HTML CSS & JavaScript

CodingNepal — Thu, 14 May 2020 10:17:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Cool Login Form with Password Show or Hide Option in HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Login Form but there is no password show hide option. Now, it’s time to create a Login Form with a password show or hide a Button.

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

This Login Form is created only for design purposes. There is no action when you submitted the form after entered credential details (Email & password). There is no backend integration because I used only HTML & CSS to create this form. So there is no backend role in this form.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Cool Login Form).

Video Tutorial of Cool Login Form in HTML & CSS

If you like this program (Cool 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 can use this form in your websites, projects, and anywhere you want. If you’re a beginner and this video helped you to understand the codes behind creating a login form, then don’t forget to share it with your friends. You can also create this type of login form if you have basic knowledge of HTML & CSS.

Login Form Design in HTML & CSS [Source Codes]

To create this program (Cool Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Login Form
      
      
   
   
      
         
            Login Form
         
         
            
            
            
            
            
            Forgot Password?

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
 margin: 0;
 padding: 0;
 background: radial-gradient(#a429bc,#9225a7,#7f2092);
 height: 100vh;
 overflow: hidden;
 font-family: 'Noto Sans TC', sans-serif;
}
.center{
 width: 430px;
 margin: 130px auto;
 position: relative;
}
.center .header{
 font-size: 28px;
 font-weight: bold;
 color: white;
 padding: 25px 0 30px 25px;
 background: #5c1769;
 border-bottom: 1px solid #370e3f;
 border-radius: 5px 5px 0 0;
}
.center form{
 position: absolute;
 background: white;
 width: 100%;
 padding: 50px 10px 0 30px;
 box-sizing: border-box;
 border: 1px solid #6d1c7d;
 border-radius: 0 0 5px 5px;
}
form input{
 height: 50px;
 width: 90%;
 padding: 0 10px;
 border-radius: 3px;
 border: 1px solid silver;
 font-size: 18px;
 outline: none;
}
form input[type="password"]{
 margin-top: 20px;
}
form i{
 position: absolute;
 font-size: 25px;
 color: grey;
 margin: 15px 0 0 -45px;
}
i.fa-lock{
 margin-top: 35px;
}
form input[type="submit"]{
 margin-top: 40px;
 margin-bottom: 40px;
 width: 130px;
 height: 45px;
 color: white;
 cursor: pointer;
 line-height: 45px;
 border-radius: 45px;
 border-radius: 5px;
 background: #5c1769;
}
form input[type="submit"]:hover{
 background: #491254;
 transition: .5s;
}
form a{
 text-decoration: none;
 font-size: 18px;
 color: #7f2092;
 padding: 0 0 0 20px;
}

That’s all, now you’ve successfully created a Cool Login Form in HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Animated Login Form using HTML CSS & JavaScript

CodingNepal — Thu, 14 May 2020 09:04:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Login Form with Password Show or Hide Button using HTML CSS & JavaScript. Earlier I have shared an Amazing Transparent Login Form. Now, it’s time to create this Animated Login Form with Password Show Hide Button.

As you know, A login form is a set of credentials used to authenticate the user before login into your website. Most often, these consist of a username and password.

In the image, you can see this is an Animated Login Form with a gradient background. Basically, in the image, there is not show password show or hide button. But when you entered some texts in the password field then the password show hide button will appear. I created those two login buttons of Facebook and Google plus is only for design. There is no action when you click on that button.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Login Form).

Video Tutorial of Animated Login Form Design

If you like this program (Animated Login Form UI Design) 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.

If you’re a beginner you can use this Login Form in your project and websites. I believe this login form code will help you a lot. Or if you have some knowledge of JavaScript or PHP you can add some functions in this format and use it according to your requirements.

Animated Login Form HTML & CSS [Source Codes]

To create this program (Animated Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Animated Login Form
      
      
   
   
      
         Login Form
         
            
               
               Email or Username
            
            
               
               SHOW
               Password
            
            
               
               
            
         
         
            Or login with
         
         
            
               Facebook
            
            
               Google
            
         
         
            Not a member? Signup now

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  border-radius: 5px;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
  justify-content: center;
  background: url(bg.jpg);
  background-size: cover;
  background-position: center;
}
.container{
  position: relative;
  width: 400px;
  background: white;
  padding: 60px 40px;
}
header{
  font-size: 40px;
  margin-bottom: 60px;
  font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
  margin: 25px 0;
  position: relative;
  height: 50px;
  width: 100%;
}
.input-field input{
  height: 100%;
  width: 100%;
  border: 1px solid silver;
  padding-left: 15px;
  outline: none;
  font-size: 19px;
  transition: .4s;
}
input:focus{
  border: 1px solid #1DA1F2;
}
.input-field label, span.show{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-field label{
  left: 15px;
  pointer-events: none;
  color: grey;
  font-size: 18px;
  transition: .4s;
}
span.show{
  right: 20px;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
}
input:valid ~ span.show{
  visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
  transform: translateY(-33px);
  background: white;
  font-size: 16px;
  color: #1DA1F2;
}
form .button{
  margin-top: 30px;
  overflow: hidden;
  z-index: 111;
}
.button .inner{
  position: absolute;
  height: 100%;
  width: 300%;
  left: -100%;
  z-index: -1;
  transition: all .4s;
  background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);
}
.button:hover .inner{
  left: 0;
}
.button button{
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.container .auth{
  margin: 35px 0 20px 0;
  font-size: 19px;
  color: grey;
}
.links{
  display: flex;
  cursor: pointer;
}
.facebook, .google{
  height: 40px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 3px;
  margin: 0 10px;
  transition: .4s;
}
.facebook:hover{
  border: 1px solid #4267B2;
}
.google:hover{
  border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
  color: #4267B2;
}
.google i, .google span{
  color: #dd4b39;
}
.links i{
  font-size: 23px;
  line-height: 40px;
  margin-left: -90px;
}
.links span{
  position: absolute;
  font-size: 17px;
  font-weight: bold;
  padding-left: 8px;
  font-family: 'Open Sans', sans-serif;
}
.signup{
  margin-top: 50px;
  font-family: 'Noto Sans', sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created an Animated Login Form Using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Transparent Login Form HTML CSS & JavaScript

CodingNepal — Sat, 25 Apr 2020 10:25:00 +0000

Hello friends, today in this blog you’ll learn how to create an Amazing Transparent Login Form using HTML CSS, and Javascript. In the previous blog, I have shared how to create a Login and Registration Form in HTML & CSS and now it’s time to create a simple but amazing transparent login form html css.

I’m sure you have seen many login form html template on many websites. Simply, A login form is a set of inputs used to authenticate or validate a user before access to the restricted page. The login form carries a field for the username and another for the password.

In this design [Login Form HTML CSS], as you can see in the image preview, this is an Amazing Transparent Login Form which is created using HTML CSS & JavaScript. Javascript is only used to toggle show or hide passwords. In this login 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 and css.

This is a Login Form that has no backend unification. You can use backend language like PHP to make this login form functional and dynamic. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial of this form [Login Form HTML CSS]

Video Tutorial of Transparent Login Form HTML CSS

I hope after watching this video you’ve understood the basic codes, concepts behind creating this login form. You can change the position of this form and image very easily, you need to change some position property values. If you like this login form and want to get the source codes of this form then don’t worry, you can easily copy from the given code boxes or easily download source code files from the given download button.

I’ve already shared many login form html templates and you’ve missed it then don’t worry click here to view all popular login form html template and I believe you’ll just love it

Transparent Login Form HTML CSS [Source Codes]

To create this form [Transparent Login Form HTML CSS]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the given codes in your files.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Transparent Login Form HTML CSS
      
      
   
   
      
         
            Login Form
            
               
                  
                  
               
               
                  
                  
                  SHOW
               
               
                  Forgot Password?
               
               
                  
               
            
            
               Or login with
            
            
               
                  Facebook
               
               
                  Instagram
               
            
            
               Don't have account?
               Signup Now

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@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;
}

That’s all, now you’ve successfully created an Amazing Transparent Login Form using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Login Form HTML CSS – CodingNepal

Create A Glassmorphism Login Form in HTML and CSS

Steps To Create Glassmorphism Login Form HTML & CSS

Login

Conclusion and Final Words

Login Form Validation in HTML CSS & JavaScript

Video Tutorial of Form Validation in HTML & JavaScript

You might like this:

Form Validation in HTML & JavaScript [Source Codes]

Login and Registration Form in HTML CSS & JavaScript

Video Tutorial of Login and Registration Form in HTML

You might like this:

Login and Registration Form in HTML [Source Codes]

Cool Login Form in HTML CSS & JavaScript

Video Tutorial of Cool Login Form in HTML & CSS

You might like this:

Login Form Design in HTML & CSS [Source Codes]

Animated Login Form using HTML CSS & JavaScript

Video Tutorial of Animated Login Form Design

You might like this:

Animated Login Form HTML & CSS [Source Codes]

Transparent Login Form HTML CSS & JavaScript

Video Tutorial of Transparent Login Form HTML CSS

You might like this:

Transparent Login Form HTML CSS [Source Codes]