Animated Floating Input Labels Using CSS

October 1, 2020

Rahul

Hello guys in this tutorial we will create Animated Floating Input Labels using html and css

First we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Floating Label Input By CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
  <div class="form-row">
    <form method="post">
      <div class="field">
         <label>
          <input type="text" placeholder=" ">
          <p>Enter Your Name</p>
        </label>
      </div>
    </form>
  </div>
</body>
</html>

Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', serif;
  -webkit-tap-highlight-color: transparent;
}
html,body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
}
.field {
    margin-bottom: 15px;
}

.field label {
  position: relative;
}

.field label input {
  font-size: 1rem;
  color: #565656;
  background: transparent;
  padding: 1rem 1.2rem;
  min-width: 24rem;
  border-radius: 0.2rem; 
  border: 2px solid #565656;
  transition: border-color 0.2s;
}

.field label input:focus {
  border-color: #4766ff;
}
.field label p {
  color: #4766ff;
  font-size: 1rem;
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.8rem;
  padding: 0 0.4rem;
  background: #f1f1f1;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
  pointer-events: none;
}

.field label input:focus + p,
.field label input:not(:placeholder-shown) + p {
  top: -20px;
  font-size: 0.9rem;
  color: #4766ff;
}
.field label input:not(:focus) + p {
  color: #565656;
}

Output:

Leave a Comment Cancel reply