WEBLEB
Home
AI Editor
Chat
Login
Pro
English
English
Français
Español
Animated HTML and CSS Input
2,748
0
Inputs & Toggles
hasan
Follow
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
0
Recommended
23 May 2025
Card login
18 December 2025
Car King Arena
21 October 2024
Firefly Button
HTML
Copy
<div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">First Name</label> </div> <div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">Last Name</label> </div> <div class="input-group"> <input required="" type="email" name="email" autocomplete="off" class="input"> <label class="user-label">Enter your Email</label> </div>
CSS
Copy
body{ margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .input-group { position: relative; padding:20px; } .input { border: dotted 1.5px #9e9e9e; border-radius: 1rem; background: none; padding: 1rem; font-size: 1rem; color: #f5f5f5; transition: border 150ms cubic-bezier(0.4,0,0.2,1); } .user-label { position: absolute; left: 35px; color: #e8e8e8; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } .input:focus, input:valid { outline: solid 1px; border: 1.5px solid #1a73e8; } .input:focus ~ label, input:valid ~ label { transform: translateY(-50%) scale(0.8); background-color: #212121; padding:0 .2em; color: #2196f3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
Comments
0
Log in to join the discussion
…
