What's new

Web Pure CSS Floating Buttons

  • Thread starter NukeZilla
  • Start date
  • Views 652
N

NukeZilla

Enthusiast
Messages
144
Reaction score
40
Floating CSS labels:

I'm no fan of frontend frameworks and you can read more about this here: Frontend frameworks are dead. So floating labels are on the rise since Material design came out and many of these uses Javascript or SVG. But more importantly, people are injecting a full UI framework for a very small feature. Now it's time for you all to ditch these horrendous frameworks, which goes against your branding guidelines and create your own unique styles.

Lets get started. First you need to create your HTML structure:

HTML:
<form>
  <div class="input-field">
    <input type="text" placeholder="Jordan" name="design1" required>
    <label for="design1">First Name</label>
  </div>
  <div class="design-1">
    <input type="text" name="design1" required>
    <label for="design1">First Name</label>
  </div>
</form>
You may have notice the label is after input box. This is done so you can change the styles depending on the input state and take advantage of pseudo-class and remove the need to use z-index saving on file size. Right now you will have back to front form.

Now let's start off with the form container. In my case, I called the container input-field.

Code:
.input-field {
  position: relative;
  height:50px;
  border:1px solid #111;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom:5px;
}

The container is the new input box. So you should style it in the same way you would style a normal input. As this is now the style for the input you will need to remove style from the input box. We need to make the whole container clickable, we do this by setting the height and width to 100%.

Code:
.input-field > input {
border: none;
width: 100%;
height:100%;
box-sizing: border-box;
}
.input-field > input:focus {
  outline:0;
}

Now it's time to position the label over the input box. We now use two different styles depending if you actually want to use a placeholder. Please be aware a placeholder should only ever be used to show an example, and not as a label. We can do this by using the pseudo-class :tongue:laceholder-shown

Code:
.input-field > input:placeholder-shown + label {
  // with placeholder
  position: absolute;
  top: 2px;
  padding-left:5px;
}
.input-field > input:not(:placeholder-shown) + label {
  // without placeholder
  position: absolute;
  top: 18px;
  padding-left:5px;
}

In my example I wanted the label to be above the placeholder but you can always have the label on the same line of the placeholder.

Now it's time to change the style and location when you in focus or valid.

Code:
//focus design
.input-field  > input:focus{
  height:50%;
  outline: none;
  transition: 0.2s;
}
.input-field  > input:focus + label{
  top: 50%;
  transition: 0.2s;
  background: #fcfcfc;
  width: 100%;
  height:100%;
  padding-top:5px;
  font-size:14px;
}

//valid design
.input-field > input:valid {
  height:50%;
  outline: none;
  transition: 0.2s;
}
.input-field > input:valid + label{
  top: 50%;
  transition: 0.2s;
  background: #fcfcfc;
  width: 100%;
  height:100%;
  padding-top:5px;
  font-size:14px;
}

Using transition allows the label to animation to the new style, but you could use keyframe animation.

Working example: http://codepen.io/Jordan-Hall/pen/PzBdya

If you want to use input attribute pattern then you would need to add the following styles:

Code:
//not empty
.input-field > input:not([value=""]) {
  height:50%;
  outline: none;
  transition: 0.2s;
}
.input-field >input:not([value=""]) + label{
  top: 50%;
  transition: 0.2s;
  background: #fcfcfc;
  width: 100%;
  height:100%;
  padding-top:5px;
  font-size:14px;
}

You would also need to adjust your HTML structure to add "onkeyup" attribute:
Code:
onkeyup="this.setAttribute('value', this.value);"
I hope this helps people to style the website how you want and not to what a framework provides.
 
Last edited:
Top Bottom