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

Turkish Login Form HTML Code Example

Material Login Form Template

FORMULAIRE

HTML

CSS

JS

Recommended

Turkish Login Form HTML Code Example

Material Login Form Template

FORMULAIRE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS