DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Fun Form - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Fun Form
rohit325
Feb 04, 2026
18
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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; }
1
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"; }
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!