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.

Image for post
Image for post
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.

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

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.

Note, that the y-axis increases vertically downwards: positive lengths shift the element down, while negative lengths shift it up.

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.

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.

Image for post
Image for post
SOURCE-AIRBNB

Written by

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