Animated login form

Open In Editor Publish Your Code

<div class="login__box-input">
                     <input type="password" required class="login__input" id="login-pass" placeholder=" ">
                     <label for="login-pass" class="login__label">Password</label>
                     <i class="ri-eye-off-line login__eye" id="login-eye"></i>
                  </div>
               </div>
            </div>

<div class="login__check">
               <div class="login__check-group">
                  <input type="checkbox" class="login__check-input" id="login-check">
                  <label for="login-check" class="login__check-label">Remember me</label>
               </div>

<a href="#" class="login__forgot">Forgot Password?</a>
            </div>

<button type="submit" class="login__button">Login</button>

<p class="login__register">
               Don't have an account? <a href="#">Register</a>
            </p>
         </form>
      </div>
      
   </body>
</html>

CSS

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

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body,
input,
button {
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
}

body {
  color: hsl(0, 0%, 100%);
}

input,
button {
  border: none;
  outline: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== LOGIN ===============*/
.login {
  position: relative;
  height: 100vh;
  display: grid;
  align-items: center;
}

.login__img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.container {
  position: relative;
  background-color: hsla(0, 0%, 10%, 0.1);
  border: 2px solid white;
  margin-inline: 1.5rem;
  padding: 2.5rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

.login__title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.login__content,
.login__box {
  display: grid;
}

.login__content {
  row-gap: 1.75rem;
  margin-bottom: 1.5rem;
}

.login__box {
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 0.75rem;
  border-bottom: 2px solid hsl(0, 0%, 100%);
}

.login__icon,
.login__eye {
  font-size: 1.25rem;
}

.login__input {
  width: 100%;
  padding-block: 0.8rem;
  background: none;
  color: hsl(0, 0%, 100%);
  position: relative;
  z-index: 1;
}

.login__box-input {
  position: relative;
}

.login__label {
  position: absolute;
  left: 0;
  top: 13px;
  font-weight: 500;
  transition: top 0.3s, font-size 0.3s;
}

.login__eye {
  position: absolute;
  right: 0;
  top: 18px;
  z-index: 10;
  cursor: pointer;
}

.login__box:nth-child(2) input {
  padding-right: 1.8rem;
}

.login__check,
.login__check-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login__check {
  margin-bottom: 1.5rem;
}

.login__check-label,
.login__forgot,
.login__register {
  font-size: 0.813rem;
}

.login__check-group {
  column-gap: 0.5rem;
}

.login__check-input {
  width: 16px;
  height: 16px;
}

.login__forgot {
  color: hsl(0, 0%, 100%);
}

.login__forgot:hover {
  text-decoration: underline;
}

.login__button {
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: hsl(0, 0%, 100%);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 2rem;
}

.login__register {
  text-align: center;
}

.login__register a {
  color: hsl(0, 0%, 100%);
  font-weight: 500;
}

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

/* Input focus move up label */
.login__input:focus + .login__label {
  top: -12px;
  font-size: 0.813rem;
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label {
  top: -12px;
  font-size: 0.813rem;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
  .login {
    justify-content: center;
  }

.container {
    width: 400px;
    padding: 4rem 3rem 3.5rem;
    border-radius: 1.5rem;
  }

.login__title {
    font-size: 2rem;
  }
}

Animated login form

Recommended

Glassmorphic Sign in Form

Login Form

Turkish Login Form HTML Code Example

HTML

CSS

JS

Recommended

Glassmorphic Sign in Form

Login Form

Turkish Login Form HTML Code Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS