How to create an animated email input when user clicks on it using CSS

November 9, 2022

I want to create a cool animation that when the user clicks on the email input or the password the label of the input will go up and have a nice transition in the bottom border.

This is what I have:

And this is what I want to create:

My code:

.form {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.input {
  background: none;
  color: #c6c6c6;
  font-size: 1.8rem;
  padding: 1.6rem;
  display: block;
  border: none;
  border-bottom: 1px solid #c6c6c6;
  width: 100%;
}

.label {
  position: absolute;
  color: #c6c6c6;
  font-size: 1.6rem;
  left: 0.5rem;
  top: 1rem;
}

<div class="form">
    <input class="email input" type="email" name="email" />
    <label class="label" for="email">Email Address</label>
</div>
<div class="form">
    <input class="password input" type="password" name="password" />
    <label class="label" for="password">Password</label>
</div>

I’ve searched a lot but every code example I found was with SCCS, SASS and I don’t understand it. So please help me with plain CSS. Any help would be greatly appreciated!

>Solution :

I created an animated demo using HTML and CSS.

.main {
    width: 500px;
    margin: 50px 100px;
    ;
}

.form-group {
    position: relative;
    margin-bottom: 45px;
}

input {
    display: block;
    width: 300px;
    font-size: 14pt;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ccc;
}

input:focus {
    outline: none;
}

label {
    position: absolute;
    top: 10px;
    left: 5px;
    color: #999;
    font-size: 14pt;
    font-weight: normal;
    pointer-events: none;
    transition: all 0.2s ease;
}

input:focus ~ label,
input:valid ~ label {
    top: -20px;
    font-size: 10pt;
    color: #5264AE;
}

.bar {
    display: block;
    position: relative;
    width: 320px;
}

.bar:before,
.bar:after {
    content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #5264AE;
    transition: all 0.2s ease;
}

.bar:before {
    left: 50%;
}

.bar:after {
    right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
    width: 50%;
}

<div class="main">
    <div class="form-group">
        <input type="text" name="email" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="email">Email</label>
    </div>
    
    <div class="form-group">
        <input type="password" name="password" required />
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="password">Password</label>
    </div>
</div>