Gmail login animation snippet

Submit By webmaster 4 months ago in html category
Tags: loginanimation
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.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet