Animated Login form

Open In Editor Publish Your Code

</head>
<body>
<div class="container">
 <div class="login-box">
 <h2>Login</h2>
 <form action="#">
 <div class="input-box">
 <input type="email" required>
 <label>Email</label>
 </div>
 <div class="input-box">
 <input type="password" required>
 <label>Password</label>
 </div>
 <div class="forgot-password">
 <a href="#">Forgot Password?</a>
 </div>
 <button type="submit" class="btn">Login</button>
 <div class="signup-link">
 <a href="#">Signup</a>
 </div>
 </form>
 </div>

</div>
 
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1f293a;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container span {
  position: absolute;
  left: 0;
  width: 32px;
  height: 6px;
  background: #2c4766;
  border-radius: 8px;
  transform-origin: 128px;
  transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50)));
  animation: animateBlink 3s linear infinite;
  animation-delay: calc(var(--i) * (3s / 50));
}

@keyframes animateBlink {
  0% {
    background: #0ef;
  }

25% {
    background: #2c4766;
  }
}

.login-box {
  position: absolute;
  width: 400px;
}

.login-box form {
  width: 100%;
  padding: 0 50px;
}

h2 {
  font-size: 2em;
  color: #0ef;
  text-align: center;
}
.input-box {
  position: relative;
  margin: 25px 0;
}

.input-box input {
  width: 100%;
  height: 50px;
  background: transparent;
  border: 2px solid #2c4766;
  outline: none;
  border-radius: 40px;
  font-size: 1em;
  color: #fff;
  padding: 0 20px;
  transition: 0.5s;
}

.input-box input:focus,
.input-box input:valid {
  border-color: #0ef;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #fff;
  pointer-events: none;
  transition: 0.5s ease;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: 1px;
  font-size: 0.8em;
  background-color: #1f293a;
  padding: 0 6px;
  color: #0ef;
}

.forgot-password {
  margin: -15px 0 10px;
  text-align: center;
}

.forgot-password a {
  font-size: 0.85em;
  color: #fff;
  text-decoration: none;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  height: 45px;
  border-radius: 45px;
  background: #0ef;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1em;
  color: #1f293a;
  font-weight: 600;
}

.signup-link {
  margin: 20px 0 10px;
  text-align: center;
}

.signup-link a {
  font-size: 1em;
  color: #0ef;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  text-decoration: underline;
}

Animated Login form

Recommended

HTML Login Form Template V2

Form with Video Background

Animated card of social media

HTML

CSS

JS

Recommended

HTML Login Form Template V2

Form with Video Background

Animated card of social media

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS