Label Slide Up Login Form Using Only HTML ,CSS and JS

HTML

CSS

Output

HTML

<!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>Label Slide Up Login Form Using Only HTML ,CSS and JS</title>

</head>

<body>
  <section class="authMaindiv-area">
    <div class="authMainDiv">
      <h1 class="headingArea">Sign in to <span>Account</span></h1>
      <form action="#">
        <div class="auth-form">
          <label for="email">Email</label>
          <input type="text" id="email">
        </div>
        <div class="auth-form">
          <label for="password">Password</label>
          <input type="text" id="password">
        </div>
        <div class="rememberAndForgetDiv">
          <div>
            <input type="checkbox" id="remember_me">&nbsp<label for="remember_me">Remember Me</label>
          </div>
          <div><a href="javascript:void(0)"><span>Forgot Password?</span></a></div>
        </div>
        <div class="authButtonDiv">
          <button type="submit">Sign In</button>
        </div>
        <p class="authButtomPara">Don’t have an account? &nbsp;<a href="javascript:void(0)">Sign Up</a></p>
      </form>
    </div>
  </section>

</body>

</html>

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .authMainDiv {
      max-width: 575px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      padding: 35px;
    }
    .headingArea {
      color: 333333;
      font-size: 42px;
      position: relative;
      margin-bottom: 35px;
    }
    .headingArea::before {
      content: "";
      display: block;
      width: 70px;
      height: 4px;
      background: #fc8f00;
      left: 0;
      top: calc(100% + 5px);
      position: absolute;
    }
    .headingArea span {
      color: #fc8f00;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 30px white inset !important;
    }
    .auth-form {
      position: relative;
      margin-top: 15px;
      height: 45px;
      width: 100%;
    }
    .auth-form input {
      width: 100%;
      height: 100%;
      border: 1px solid #DFDFDF;
      border-radius: 50px;
      padding: 0 30px;
    }
    .auth-form input:focus {
      border: 1px solid #fc8f00 !important;
      outline: none;
    }
    .auth-form label {
      position: absolute;
      z-index: 1;
      background-color: rgb(255, 255, 255);
      padding: 0 2px;
      margin-left: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #CACACA;
      font-weight: 400;
      font-size: 14px;
      transition: all 125ms;
      pointer-events: none;
    }
    .auth-form label.active {
      position: absolute;
      z-index: 1;
      background-color: rgb(255, 255, 255);
      padding: 0 2px;
      margin-left: 30px;
      top: 0%;
      transform: translateY(-50%);
      color: #fc8f00;
      font-weight: 600;
      font-size: 16px;
      transition: all 125ms;
    }
    .rememberAndForgetDiv {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }
    .rememberAndForgetDiv input {
      height: 16px;
      width: 16px;
    }
    .rememberAndForgetDiv div {
      display: flex;
      align-items: center;
    }
    .rememberAndForgetDiv label {
      font-weight: 400;
      font-size: 14px;
      color: #707070;
    }
    .rememberAndForgetDiv span {
      font-weight: 400;
      font-size: 14px;
      color: #707070;
    }
    .rememberAndForgetDiv a {
      text-decoration: none;
    }
    .authButtonDiv button {
      border: 1px solid #fc8f00;
      background: #fc8f00;
      border-radius: 50px;
      width: 100%;
      height: 50px;
      font-weight: 700;
      font-size: 18px;
      color: #fff;
      margin-top: 30px;
    }
    .authButtonDiv button:hover {
      border: 1px solid #fc8f00;
      background: transparent;
      color: #fc8f00;
    }
    .authInnerDiv {
      width: 100%;
    }
    .authformMainPart {
      padding: 25px;
      width: 100%;
    }
    .authButtomPara {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      font-weight: 400;
      font-size: 15px;
      color: #707070;
    }
    .authButtomPara a {
      text-decoration: none;
      color: #fc8f00;
      font-weight: 500;
    }
    .authMaindiv-area {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    @media (max-width:618px) {
      .authMainDiv {
        margin: 0 1rem;
      }
    }

JS

Ui Code Snippets

Label Slide Up Login Form Using Only HTML ,CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Label Slide Up Login Form Using Only HTML ,CSS and JS

HTML

CSS

JS

Output

Network Marketing

SEO Course