WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated HTML Input
1816
securearray494
Open In Editor
Publish Your Code
Recommended
23 August 2025
Turkish Login Page HTML: Giriş Yap Form
22 August 2024
Animated card with 3d hover effect
25 May 2025
Portflio Modren and Post System { HTML CSS JS } By Youssef Pl
HTML
Copy
<div class="input-group"> <input required="" type="text" name="text" autocomplete="off" class="input"> <label class="user-label">First Name</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; } .input { border: solid 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: 15px; color: #e8e8e8; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); } .input:focus, input:valid { outline: none; 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) */
