WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated HTML and CSS Input
2044
hasan
Open In Editor
Video
Publish Your Code
0
Recommended
25 June 2025
Araba Alım Satım Platformu: İlanlar, Filtreleme
19 March 2025
Study lights
16 May 2025
A Code by Maxi-Digital, une page 404 sophistiquée avec une bougie animée réaliste
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) */
