Gmail login animation snippet
Gmail login animation snippet with CSS only, no JS is required to achieve this kind of animation.
Preview
HTML
CSS
JavaScript
Resources
<div class="main">
<h1>Login Form</h1>
<form>
<div class="animate-label">
<input type="text" id="username" required />
<label for="username"> Email or phone </label>
<span class="bottom-line"></span>
</div>
<div class="animate-label">
<input type="password" id="password" required/>
<label for="password"> Password </label>
<span class="bottom-line"></span>
</div>
</form>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sen:
[email protected] ;700;800&display=swap');
body { font-family: 'Sen', sans-serif; background: #bbdefb; }
*, *:before, *:after {
box-sizing: border-box;
}
.main {
width: 350px;
height: 400px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
background: rgba(360, 360, 360, .95);
padding: 40px 50px 50px 50px;
margin: 100px auto 0;
}
h1{
margin: 0 0 40px;
}
form{
display:flex;
flex-direction: column;
}
input{
width: 100%;
border: none;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
input:focus{
outline: none;
}
#password{
margin-top: 15px;
}
.animate-label {
position: relative;
margin-top: 25px;
}
label {
position: absolute;
bottom: 6px;
left: 0;
transition: .3s all ease;
font-size: 14px;
width: 100%;
color: #666;
}
input:valid + label,
input:focus + label {
bottom: 30px;
font-size: 10px;
}
input:focus + label{
color: #4285f4;
}
.bottom-line:before{
content: '';
position: absolute;
background: #4285f4;
width: 0px;
height: 2px;
right: 50%;
bottom: 0;
}
input:focus ~ .bottom-line:before{
width: 100%;
right: 0;
transition: all .3s ease;
}
Download Gmail login animation snippet snippet code.
This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project.
You can modify the above editor code and see the live update. You can also download the modify code.
Feel free to play with Gmail login animation snippet snippet code.
If you like it then don't forget to share this code with your friends.
Download Snippet
Free code snippet playground
Let's share the example by using HTML, CSS, JavaScript and Bootstrap.
Add New Snippet