Floating Brutal Label

USER_ID

Floating Brutal Label

HTML_STRUCTURE

<div class='bh-form-v2-group'><input type='text' class='bh-form-v2-input' required><label class='bh-form-v2-label'>USER_ID</label></div>

CSS_STYLING

.bh-form-v2-group { position: relative; width: 100%; max-width: 350px; margin-top: 20px; } .bh-form-v2-input { width: 100%; padding: 15px; background: #000; border: 2px solid #222; color: #fff; font-weight: 900; outline: none; transition: 0.3s; } .bh-form-v2-label { position: absolute; left: 15px; top: 15px; color: #444; pointer-events: none; transition: 0.3s; font-size: 12px; font-weight: 900; } .bh-form-v2-input:focus ~ .bh-form-v2-label, .bh-form-v2-input:valid ~ .bh-form-v2-label { top: -20px; left: 0; color: #00ff88; font-size: 10px; } .bh-form-v2-input:focus { border-color: #00ff88; box-shadow: 5px 5px 0px #111; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.