How to make glass morpism login form in html and css

Hello everybody and all coders, Today in this blog you will learn how to create a responsive Login Form with glassmorphism using only HTML & CSS language. Before I have shared an articles on my blog. How to create a Responsive Contact Form Design and now I’m going to create a Login Form with glassmorphism desine

A login form is a collection of credentials used to validate a user.
If a user has to make any kind of post, download photo, or do any other reduction, then from the login form data, it can be found out whether this user is valid or not.

Most often, these consist of a username and password. The login form can be used anywhere such as on the website, through mobile apps and computer applications (software). A floating label has been added to this login form which, when clicked, moves upwards. Text that appears inside an input field.

In this program (also used glass morphism with floating label animation which looks very attractive), you are given a login form button with two input fields - email and password, a forgotten password There is a button, there is a button for the Remember me checkbox, and there is also a signup link, if you are a new user then you can signup.

If you like this program (glass morphism with floating label animation) and would like to get the source code below, just copy and paste it into your code editor. You have to scroll down to get the source code. You can use this login form in your HTML pages, websites and projects. It's absolutely free.

Glass morphism with floating label animation [source code]
To make this program (glass morphism with floating label animation) first of all, you need to create two files one is html file and other is css file. After creating these files just copy paste the code in your file.

First of all create an HTML file named index.html and paste the given code in your HTML file. Remember, you'll need to create a file with the .html extension. You can name anything. But it is very important for you to write the .html extension only then this code will work otherwise it will not work.

Copy Code To Clipboard | CodingLab

HTML Code🖱

        <!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">
    <title>Login Form Reponsive</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


  <div class="wrapper">
    <div class="title">
       Login Form
    </div>
    <form action="#">
       <div class="field">
          <input type="text" required>
          <label>Email .@gmail @outlook </label>
       </div>
       <div class="field">
          <input type="password" required>
          <label>Password (*vf545TGUkk)</label>
       </div>
       <div class="content">
          <div class="checkbox">
             <input type="checkbox" id="remember-me">
             <label for="remember-me">Remine me</label>
          </div>
          <div class="pass-link">
             <a href="#">Forgot Me</a>
          </div>
       </div>
       <div class="field">
          <input type="submit" value="Login">
       </div>
       <div class="signup-link">
          I have no account | <a href="#">Sign up now</a>
       </div>
    </form>
 </div>
</body>
</html>

CSS Code🖱

        @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: 100vh;
          content: '';
          width: 100%;
          opacity: .9;
            z-index: -2;
          place-items: center;
          background: url(/bg.jpg);
          background-size: cover;
          background-position: center;
          /* background: linear-gradient(-135deg, #c850c0, #4158d0);  */
          
        }
        
        
        
        
        ::selection{
          background: #0a1444;
          color: rgb(230, 17, 17);
        }
        .wrapper{
          width: 380px;
          /* background: rgba(27, 18, 18, 0.192); */
          border-radius: 15px;
          box-shadow: 0px 19px 80px rgb(139, 66, 66);
        }
        .wrapper .title{
          font-size: 35px;
          font-weight: 600;
          text-align: center;
          line-height: 100px;
          color: #fff;
          user-select: none;
          border-radius: 19px 2px ;
          /* background-image: url(/bg.jpg);
          background-size: cover; */
          background: linear-gradient(-135deg, #ff0000, #f7f3f3 );
        }
        .wrapper form{
          padding: 10px 30px 50px 30px;
        }
        .wrapper form .field{
          height: 50px;
          width: 100%;
          margin-top: 20px;
          position: relative;
        }
        .wrapper form .field input{
          height: 100%;
          width: 100%;
          outline: none;
          font-size: 17px;
          padding-left: 20px;
          border: 2px solid rgb(255, 255, 255);
          border-radius: 15px 1px;
          transition: all 0.1s ease;
        }
        .wrapper form .field input:focus,
        form .field input:valid{
          border-color: #eb6e08;
        }
        .wrapper form .field label{
          position: absolute;
          top: 50%;
          left: 20px;
          color: #d3393963;
          font-weight: 300;
          font-size: 15px;
          pointer-events: none;
          transform: translateY(-50%);
          transition: all 0.1s ease;
        }
        form .field input:focus ~ label,
        form .field input:valid ~ label{
          top: 0%;
          font-size: 15px;
          color: #4158d0;
          background: rgb(255, 255, 255);
          transform: translateY(-50%);
        }
        form .content{
          display: flex;
          width: 100%;
          height: 50px;
          font-size: 16px;
          align-items: center;
          justify-content: space-around;
        }
        form .content .checkbox{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        form .content input{
          width: 15px;
          height: 15px;
          background: red;
        }
        form .content label{
          color: #262626;
          user-select: none;
          padding-left: 5px;
        }
        form .content .pass-link{
          color: "";
        }
        form .field input[type="submit"]{
          color: rgb(9, 10, 10);
          border: none;
          padding-left: 0;
          margin-top: -10px;
          font-size: 20px;
          font-weight: 700;
          cursor: pointer;
          background: linear-gradient(-135deg, hwb(0 89% 7% / 0.226), hsl(0, 7%, 86%) );
          transition: all 0.3s ease;
        }
        
        
        
        
        form .field input[type="submit"]:active{
          transform: scale(0.98);
        }
        form .signup-link{
          color: #262626;
          margin-top: 20px;
          text-align: center;
        }
        
        form .signup-link:hover{
          color: #d12222;
          margin-top: 20px;
          text-align: center;
        }
        
        form .pass-link a,
        form .signup-link a{
          color: #002aff;
          text-decoration: none;
        }
        form .pass-link a:hover,
        form .signup-link a:hover{
          text-decoration: underline;
        }
        
        
        .wrapper{
          /* responsive size w h */
            width: 300px;
            height: 465px;
            /* background: url(img/img1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover; */
            border-left: 2px solid rgba(255, 255, 255, 0.979);
            border-top: 1px solid rgba(255, 255, 255, .5);
            border-radius: 35px;
            box-shadow: 0 0 20px #0a090ce7;
          }

Also Read

How to make a neon background with html and css without java script.

How to Make responsive contact form from html css without java.

Second, create a CSS file named style.css and paste the given code in your CSS file. Remember, you need to create a file with .css extension. You can name anything. But it is very important for you to write the .css extension only then this code will work otherwise it will not work.

How to make glass morpism login form in html and css | Masti Programming

Also Read

Prince

Post a Comment