Led login form

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Andev Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
  </div>

<div class="login">
    <h2>Login</h2>
    <div class="inputBox">
      <input type="text" required>
      <span>Username</span>
    </div>
    <div class="inputBox">
      <input type="password" required>
      <span>Password</span>
    </div>
    <div class="inputBox">
      <input type="submit" value="Sign in">
    </div>
    <div class="group">
    <a href="#">Forgot Password</a>
    <a href="#">Sign up</a>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  font-family: 'Poppins', sans-serif;
}
.container{
  display: grid;
  grid-template-columns: repeat(3,150px);
  grid-gap: 4px;
}
/*Andev Web*/
.container .box{
  position: relative;
  width: 150px;
  height: 150px;
  background: rgba(45, 45, 45, 1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before{
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--clr), transparent, transparent);
  width: 300px;
  height: 300px;
  transition: 0.5s, top 0.1s,left 0.1s;
}
.container .box::after{
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.9);
}
.login{
  position: absolute;
  width: 450px;
  height: 600px;
  padding: 60px 40px;
  text-align: center;
  pointer-events: none;
}
.login h2{
  color: #fff;
  font-size: 2em;
  margin-bottom: 60px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox{
  position: relative;
  width: 100%;
  margin-top: 30px;
}
.login .inputBox input{
  width: 100%;
  padding: 20px 25px;
  outline: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: rgba(255, 255, 255, 0.25);
  border: 1px solid #000;
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox span{
  position: absolute;
  left: 0;
  padding: 20px 25px;
  font-size: 1em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: 0.25s;
  pointer-events: none;
}
.login .inputBox input:focus ~ span,
.login .inputBox input:valid ~ span{
  transform: translate(15px, -10px);
  font-size: 0.75em;
  background: #fff;
  color: #222;
  padding: 2px 5px;
  border: 1px solid #000;
}
.login .inputBox input[type="submit"]{
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 500;
  transition: 0.25s;
}
.login .inputBox input[type="submit"]:hover{
  background: #0f0;
  color: #222;
  border: 1px solid transparent;
}
.group{
  position: relative;
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.group a{
  color: #222;
  background: #fff;
  padding: 2px 5px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  border-radius: 4px;
  pointer-events: all;
}
.group a:nth-child(2){
  background: #f0f;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 0 15px #f0f, 0 0 30px #f0f, 0 0 60px #f0f;
}

Led login form

Recommended

HTML, Login Register animated

Add button to open add profile model with form validation

newsletter signup form

HTML

CSS

JS

Recommended

HTML, Login Register animated

Add button to open add profile model with form validation

newsletter signup form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS