CSS Login Form

Example : index.html
<html>
  <head>
    <title>CSS Login Form</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
      body{
        background-color:#f5f5f5;
        font-family:Ebrima;
      }
      .overall{
        width: 350px;
        margin: 0 auto;
        padding: 30px 0;
      }
      .form{
        color: #434343;
        border-radius: 1px;
        margin-bottom: 15px;
        background: #fff;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 30%);
        padding: 30px;
      }
      .circle{
        color: #fff;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background:#60c7c1;
        padding: 10px;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
      }
      .title{
        text-align: center;
        font-size: 20px;
      }
      .form-input input {
        min-height: 40px;
        border-radius: 2px;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        border: 1px solid #ced4da;
        margin-bottom: 20px;
      }
      button{
        background: #60c7c1 !important;
        border: none;
        min-height: 40px;
        border-radius: 2px;
        padding: .5rem 1rem;
        font-size: 1.2rem;
        text-align: center;
        color:#fff;
        width: 100%;
        box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
      }
      .signup{
        font-size: 18px;
        color:#000;
        text-align: center!important;
      }
      .signup a{
        text-decoration: none;
        color: #60c7c1;
      }  
      input:focus{ 
        outline: none !important;
        box-shadow: 0 0 0.5px 0.5px #0174b6;
      }
      button:focus{ 
        outline: none !important;
        box-shadow: 0 0 0.5px 0.5px #60c7c1;
      }
    </style>
  </head>
  <body>
    <div class="overall">
      <div class="form">
        <div class="circle"><i class="material-icons" style="font-size:100px;">person</i></div>
        <h4 class="title">Login to Your Account</h4>
        <form>
          <div class="form-input">
            <input type="text" placeholder="Username" required>
          </div>
          <div class="form-input">
            <input type="password" placeholder="Password" required>
          </div>
          <div class="form-input">
            <button>Login</button>
          </div>
        </form>
        <div class="signup">Don't have an account? <a href="#">Sign up</a></div>
      </div>
    </div>
  </body>
<html>
Try it Yourself
Others

Others

CSS Login Form
