Floaty Label

Developer
Tim
Size
2,611 Kb
Views
30,360
  1. Floaty Label Previews
  2. Floaty Label HTML Codes
  3. Floaty Label CSS Codes

How do I make an floaty label?

What is a floaty label? How do you make a floaty label? This script and codes were developed by Tim on 13 October 2022, Thursday.

Floaty Label Previews
IQ Test

Floaty Label - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floaty Label</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <fieldset class="form-columns-2"> <div class="hs_firstname field hs-form-field"> <label placeholder="Enter your First Name">First Name<span class="hs-form-required"> * </span> </label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" required="required" name="firstname" value="" placeholder="Usain"> </div> </div> <div class="hs_lastname field hs-form-field"> <label placeholder="Enter your Last Name">Last Name<span class="hs-form-required"> * </span> </label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" required="required" name="lastname" value="" placeholder="Bolt"> </div> </div>
</fieldset>
<fieldset class="form-columns-2"> <div class="hs_firstname field hs-form-field"> <label placeholder="Enter your First Name">Short Label<span class="hs-form-required"> * </span> </label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" required="required" name="firstname" value="" placeholder="Usain"> </div> </div> <div class="hs_lastname field hs-form-field"> <label placeholder="Enter your Last Name">Super long label that never ends<span class="hs-form-required"> * </span> </label> <div class="hs-field-desc" style="display: none;"></div> <div class="input"> <input class="hs-input" type="text" required="required" name="lastname" value="" placeholder="Bolt"> </div> </div>
</fieldset>
</body>
</html>

Floaty Label - Script Codes CSS Codes

label { display: inline-block; margin-bottom: -10px; position: relative; font-size: 14px; top: 5px; color: rgba(255, 255, 255, 0.9); width: 100%; font-weight: 100;
}
label:before { content: ""; margin-right: 7px; margin-left: 2px; display: inline-block; width: 10px; height: 2px; border-bottom: solid white 2px; position: relative; top: -3px;
}
label:after { content: ""; display: inline-block; margin-left: 7px; width: 500px; height: 2px; border-bottom: solid white 2px; position: absolute; top: 6px;
}
.hs-input { margin-top: -4px; padding: 10px 20px; width: 300px; border: solid white 2px; border-top: none; display: block; background-color: transparent; font-size: 14px; color: white; font-weight: 100; outline: none;
}
.hs-form-field { position: relative; overflow: hidden; display: inline-block; margin-right: 20px;
}
body { background: url("https://hd.unsplash.com/photo-1456305951335-bb8134aeab8a") no-repeat center center fixed; background-size: cover; font-family: sans-serif;
}
fieldset { border: none;
}
Floaty Label - Script Codes
Floaty Label - Script Codes
Home Page Home
Developer Tim
Username tym0
Uploaded October 13, 2022
Rating 3
Size 2,611 Kb
Views 30,360
Do you need developer help for Floaty Label?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (tym0) Script Codes
Name
Animated Hamburger Menu Button 1
Animated Checkmark
Material New Tab Page
Scroll Down Animation
Animated Hamburger Menu Button 2
A Pen by Tim
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!