Creating Google Login Form Design in CSS

Today, I will teach you how to create a google login page design that can be integrated into your website, blog, app, etc. I have used this method of creating a login page using css and JavaScript.

Before we begin creating the login page with the CSS, we will first need the HTML which will include everything from the buttons, links, fields, and the basic layout before we link the HTML to the CSS to complete the design.

Source 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>Google Login</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="box">
    <form action="#" class="form">
      <img src="images/logo.jpg" alt="">
      <h1 class="form-title">Sign In</h1>

      <div class="form-group">
        <input type="text" class="form-control" required>
        <label for="" class="form-label">Email or phone</label>
      </div>

      <div class="form-group">
        <input type="password" class="form-control" required  id="txtPassword">
        <label for="" class="form-label">Enter Your Password</label>
      </div>

      <div class="form-group">
        <label class="showLabel">
          <input type="checkbox" id="show"> 
          Show Password
      </label>
    </div>

    <div class="bottom-box">
      <a href="#">Forget password ?</a>
      <button class="form-button"> Next</button>
    </div>

    </form>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.box{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.form{
  width: 400px;
  min-height: 400px;
  padding: 32px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.form img{
  display: block;
  margin:auto;
}

.form-title{
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 20px;
}
.form-group{
  height: 48px;
  margin-bottom: 20px;
  position: relative;
}

.form-control{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:none;
  border:1px solid  #a1a1a1;
  outline:none;
  padding: 16px;
  border-radius: 3px;
  z-index: 1;
}


.form-label{
  position: absolute;
  left: 13px;
  top: 13px;
  color: #a1a1a1;
  background-color: white;
  padding: 0 6px;
  font-size: 14px;
  transition:.3s;
}

.form-control:focus+ .form-label{
  top: -10px;
  z-index: 10;
  color: #1B66C9;
  font-weight: 500;
}
.form-control:focus{
  border: 1px solid #1B66C9;
}

.form-control:not(:focus):valid+label{
  top: -10px;
  z-index: 10;
}

.showLabel{
  font-size: 14px;
}

.bottom-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
}
.bottom-box a{
  color:#1B66C9;
  text-decoration: none;
  font-size: 14px;
  font-weight:500;
}
.form-button{
  display: block;
  padding: 12px 32px;
  border: none;
  background-color: #1B66C9;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  transition: .3s;
}
.form-button:hover{
  box-shadow:0 10px 36px rgba(0,0,0,.15);
}

js/script.js

const Password = document.querySelector("#txtPassword");
const Checkbox = document.querySelector("#show");


Checkbox.addEventListener('click',function(){
  const type =Password.getAttribute("type")=== "password" ? "text" : "password";
  Password.setAttribute("type",type);
});

Output

Creating Google Login Form Design in CSS

Source Code :

css/style.css

js/script.js

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects