Fun Form

rohit325
Feb 04, 2026 18
Live Preview

Live Editor

<div class="fun-form">
  <h3>Login</h3>

  <div class="field">
    <input type="email" id="email" required>
    <label>Email</label>
  </div>

  <div class="field eye">
    <input type="password" id="password" required>
    <label>Password</label>
    <span class="toggle" onclick="togglePass()">👁</span>
  </div>

  <button id="btn">Login</button>
</div>
body{
  background:#111;
  font-family:system-ui,sans-serif;
}

.fun-form{
  width:300px;
  padding:24px;
  background:#1c1c1c;
  border-radius:18px;
  color:#fff;
  margin:60px auto;
  position:relative;
}

.fun-form h3{
  text-align:center;
  margin-bottom:20px;
}

.field{
  position:relative;
  margin-bottom:18px;
}

.field input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:none;
  outline:none;
  background:#262626;
  color:#fff;
}

.field label{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#aaa;
  pointer-events:none;
  transition:.2s;
}

.field input:focus + label,
.field input:valid + label{
  top:-8px;
  font-size:10px;
  background:#1c1c1c;
  padding:0 6px;
  color:#fff;
}

.eye .toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:14px;
}

button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:14px;
  background:#fff;
  color:#111;
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition:.2s;
}
const btn = document.getElementById("btn");
const email = document.getElementById("email");
const pass = document.getElementById("password");

btn.addEventListener("mouseenter", () => {
  if(!email.value || !pass.value){
    const x = Math.random() * 120 - 60;
    const y = Math.random() * 60 - 30;
    btn.style.transform = `translate(${x}px,${y}px)`;
  }
});

function togglePass(){
  pass.type = pass.type === "password" ? "text" : "password";
}
Categories

Fun Form

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
