How to Design a beautiful Floating Signup Page?

While browsing through the internet you must have noticed signup/login forms which have floating input fields where text floats up as soon as the cursor is focused on the input field.

SOURCE-GOOGLE

Now let’s have a closer look at how we can implement it in a simple way.

  1. Let’s create a simple input form that contains the email, name, and password of the user.
<div class="form-group"><input type="email" id="email" name="email" class="forms-control" placeholder="Email address" required><label for="email" class="form-label">Email address</label></div><div class="form-group"><input type="text" id="firstName" name="firstName" class="forms-control" placeholder="Name" required><label for="firstName" class="form-label">Name</label></div><div class="form-group"><input type="password" id="password" name="password" class="forms-control" placeholder="Password" minlength="8" required><label for="password" class="form-label">Password</label></div>

We have a form that consists of the Email, Name, and password of the user. Each div has a class form-group and forms-control for the placeholder to take up the CSS styles.

2. Let’s style the input field for proper design

.form-label{font-size: 1em;color: #000;display: block;opacity: 0.6;cursor: text;transform: translateY(-2em);padding-left: 10px;font-weight: 300;font-size: medium;font-style: normal !important;transform-origin: 0 0;transition: all .5s;}.forms-control{box-shadow: none;background-color: rgba(0, 0, 0, 0);border-radius: 20px;vertical-align: middle;border: 1px solid rgba(112, 128, 144, 0.48);width: 100%;height: 50px;cursor: text !important;transition: all .8s;padding-left: 9.15px !important;padding-top: 15px;}.forms-control::placeholder{opacity: 0;}

Initially, the placeholder opacity is set to zero so that there isn’t overlap with the label field. The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent is the element.

translateY() is a function for 2D transformation, in layman term’s the label moves to the top left to the input field.

padding, background-color, height, width, font-size, values can be changed accordingly. While transition property in CSS allows us to change property values smoothly, over a given duration. More effects can be added like transition-duration, etc for better styling.

3. Last step to add styles when input is focused.

.forms-control:focus{box-shadow: none;outline: none;border-color: blue;}.forms-control:focus + .form-label,.forms-control:not(:placeholder-shown) + .form-label{transform: translateY(-2.8em) scale(0.8);padding-left: 12px !important;}.forms-control:focus::-webkit-input-placeholder {opacity: 1;}

translateY() transforms input field to top left and we use scale property to resize label once it’s transformed to top. scale can be reduced or increased according to the size required.

:placeholder-shown is for selecting the input itself when it’s placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text.

Adding CSS and the explained HTML file can generate an output shown below(Example). With these steps, you can create cool animated form labels using the Float Label Pattern.

Wrapping up, I do hope you find this useful. Do share it ahead if you liked the effects.

SOURCE-AIRBNB

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store