<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrap"> <div class="mat-div"> <label for="first-name" class="mat-label">First Name</label> <input type="text" class="mat-input" id="first-name"> </div> <div class="mat-div"> <label for="first-name" class="mat-label">Last Name</label> <input type="text" class="mat-input" id="last-name"> </div> <div class="mat-div"> <label for="address" class="mat-label">Address</label> <input type="text" class="mat-input" id="address"> </div> <button>Submit</button> </div> <script> $(".mat-input").focus(function(){ $(this).parent().addClass("is-active is-completed"); }); $(".mat-input").focusout(function(){ if($(this).val() === "") $(this).parent().removeClass("is-completed"); $(this).parent().removeClass("is-active"); }) </script>

body { background-color: #6D5959; } body * { font-family: 'Montserrat' sans-serif; } .wrap { width: 450px; margin: 0 auto; } .mat-label { display: block; font-size: 16px; transform: translateY(25px); color: #e2e2e2; transition: all 0.5s; } .mat-input { position: relative; background: transparent; width: 100%; border: none; outline: none; padding: 8px 0; font-size: 16px; } .mat-div { padding: 30px 0 0 0; position: relative; } .mat-div:after, .mat-div:before { content: ""; position: absolute; display: block; width: 100%; height: 2px; background-color: #e2e2e2; bottom: 0; left: 0; transition: all 0.5s; } .mat-div::after { background-color: #8E8DBE; transform: scaleX(0); } .is-active::after { transform: scaleX(1); } .is-active .mat-label { color: #8E8DBE; } .is-completed .mat-label { font-size: 12px; transform: translateY(0); } button { background-color: #93E1D8; border: none; display: block; margin: 35px auto; padding: 15px 30px; border-radius: 10px; cursor: pointer; }